CSS下拉菜单

Question

我一直试图得到一个“纯css”下拉菜单几天来一直试图得到一个“简单的”css下拉导航可以让顶层显示，第二层隐藏，但不能使子项显示在悬停状态？？paste bin http://www.webdevout.net/test?01t下面的：：css和html提供了任何非常受欢迎的独立示例帮助

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; }

我想这应该足以让你开始了。欢迎在评论中提出任何问题，或更新您的问题。

此外，由于我假设您对此相当陌生，因此我想为您提供以下参考：

• For all things时髦而精彩的CSS menus：CSS Play，作者: Stu Nicholls。有关一些方法和原因的介绍，请参阅
• ：A List Apart.
• A brief introduction，来自Eric Meyer.

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

Answer 2

第二级<ul>级别必须是子级，您具有以下内容：

<li><a href="/Test2/" title="Test2 page">Test2</a></li>
<ul class="level-two">
 <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>    
</ul>

更改为以下内容：

<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>

Answer 3

这是我比较满意的css，它实现了三个级别的下拉列表，到目前为止只在FF中测试过：

/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */
ul.level-one{
  margin-left:-10px; /* lines up 1st item with search box*/
}
ul.level-one li{
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  position: relative;
  line-height: 1.3em;
  }
ul.level-one li:hover {
  background:#999ca0;
  }
.level-two {
  display: none;
  position :absolute;
  Left:0;
  top: 1em;
  }
.level-three {
  display: none;
  position :absolute;
  top: 0em;
  }
.level-one li:hover .level-two {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  }
.level-two li:hover .level-three {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  margin-left: 92px;  /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */
  }
.level-three li:hover {display:block;}