CSS下拉菜单

Question

一直试图得到一个“纯CSS”下拉 一直试图获得一个“简单”的CSS下拉导航可以得到顶级显示和第二级隐藏，但不能使子项显示在悬停？分离出的任何帮助非常感谢样品是在这里:: CSS和HTML下方粘贴斌 http://www.webdevout.net/test?01t

Answer 1

你的问题可能是因为你错误地构建了你的html。子菜单（.level-two）应该被嵌套在.level-oneli元素中：

<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，由斯图尼科尔斯。
• 对于一些早期和whys的介绍：A List Apart。
• 简要介绍，从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;}