顯示任何父母懸停的所有孩子UL LI

Question

得到了一個嵌套的LI菜單 - 我希望能夠做的是在任何父母LI懸停時顯示所有孩子的UL。理想情況下，只是在CSS？但如果不在CSS中，jQuery是可以的。

菜單代碼：

<ul> 
<li><ahref="#">Item 1</a> 
<ul> 
<li><ahref="#">Sub Item 1</a></li> 
<li><ahref="#">Sub Item 2</a></li> 
<li><ahref="#">Sub Item 3</a></li> 
</ul> 
</li> 
<li><ahref="#">Item 2</a> 
<ul> 
<li><ahref="#">Sub Item 1</a></li> 
<li><ahref="#">Sub Item 2</a></li> 
<li><ahref="#">Sub Item 3</a></li> 
</ul> 
</li> 
</ul> 

因此，例如 - 當第1項懸停 - 對於項目1和項目2應該顯示的子菜單中的UL ...容易嗎？我似乎無法工作了.... :(

Answer 1

根據您的當前需求，該<li>的懸停應顯示所有兄弟<li>元素<ul>子元素，這是不可能沒有JavaScript（帶或者沒有圖書館，因爲CSS缺乏選擇先前出現在DOM中的元素的能力，包括祖先元素和以前的兄弟姐妹）;但是如果你願意允許在父元素<ul>上進行懸停，可能與簡單的CSS：

ul > li { 
    display: list-item; 
} 

li > ul { 
    display: none; 
} 

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

JS Fiddle demo。

在使用子組合子（>）的上述表示，這將只顯示<ul>元素的第一級，如果最後一個規則修改，然後所有<ul>孩子可以證明：

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

JS Fiddle demo。