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