CSS 下拉菜单

Question

一直在尝试获得“纯 css”下拉菜单 几天来一直在尝试获得一个“简单”的 css 下拉导航可以让顶层显示和第二级隐藏但是不能让子元素显示在悬停时？任何帮助非常感谢隔离示例在这里:: 粘贴 bin 下面的 css 和 html http://www.webdevout.net/test?01t

Answer 1

您的问题可能是因为您错误地构建了 html。子菜单 (.level-two) 应该嵌套在 .level-one li 元素中:

<div id="navtree">
<ul class="level-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="level-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

如果您随后使用以下 css:

.level-one {display: inline; position: relative; }

.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.level-one:hover .level-two {display: block; }

我认为这应该足以让您入门。欢迎在评论中提出任何问题，或更新您的问题。

此外，由于我假设您对此相当陌生，因此我想为您提供以下引用资料:

• 对于 CSS 菜单的所有时髦和精彩:CSS Play ，作者:斯图尼科尔斯。
• 关于一些方法和原因的介绍:A List Apart .
• 简介，来自Eric Meyer .

有几十个，如果不是数百个，还有更多……