簡單的垂直多級菜單

Question

我正在尋找一些非常簡單的垂直多級菜單，但我沒有找到任何東西。我的菜單的想法是例如這樣的：

<ul id="menu"> 
<li><a href="#">Item 1</a></li> 
<li class="parent"><a href="#">Item 2</a> 
    <ul> 
     <li> <a href="#">Sub 1</a></li> 
     <li> <a href="#">Sub 2</a></li> 
    </ul> 
</li> 
<li><a href="#">Item 3</a></li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a> 
    <ul> 
     <li> <a href="#">Sub 1</a></li> 
     <li> <a href="#">Sub 2</a></li> 
    </ul> 
</li> 
<li><a href="#">Item 6</a></li> 

而且我想在第一隱藏所有子類別。如果我點擊某個類別，頁面將加載，並且class =「parent」的類別將顯示其類別。我的問題是，我怎麼才能達到這一點與CSS？

Answer 1

這基本上是一個懸停菜單的工作原理;默認情況下隱藏<ul>，並在懸停時顯示它。

jsFiddle

#menu li > ul { 
    display:none; 
} 

#menu li:hover > ul { 
    display:block; 
} 

如果你想.parent顯示如干脆把它與懸停規則：

jsFiddle

#menu li:hover > ul, 
#menu li.parent > ul{ 
    display:block; 
} 

Answer 2

#menu ul li ul {display: none;} 
#menu ul li.parent ul {display: block;} 

Answer 3

隱藏子類別你需要將這些添加到css文件

#menu li > ul { display:none;}