在悬停显示多个兄弟姐妹

Question

我想创建一个简单的下拉菜单，隐藏子菜单的锚点，直到主菜单锚点悬停。

HTML标记

<ul> 
    <li><a href=".">1</a></li> 
    <li><a href=".">2</a></li> 
    <li> 
     <a href=".">3</a> 
     <a href=".">3.1</a> 
     <a href=".">3.2</a> 
    </li> 
</ul> 

CSS样式

<style> 
    ul li a:nth-child(n+2){ 
     display:none; 
    } 

    ul li a:nth-child(n+2):hover{ 
     display:block; 
    } 

    ul li a:hover + a:nth-child(n+2) { 
     display: block; 
    } 
</style> 

目前只显示子菜单（3.1），当我需要它能够显示的第一锚子菜单3.2 .... 3.n的所有其他锚点，我如何实现这一目标？

Answer 1

你应该使用这样的：

HTML：

<ul id="container"> 
    <li><a href=".">1</a></li> 
    <li><a href=".">2</a></li> 
    <li><a href=".">3</a> 
     <ul> 
      <li><a href=".">3.1</a></li> 
      <li><a href=".">3.2</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

#container>li>ul{ 
    display:none; 
} 

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

演示：http://jsfiddle.net/Tx4z7/

你也填充添加到子菜单：

#container>li>ul{ 
    padding-left:20px; 
} 

演示：http://jsfiddle.net/Tx4z7/1/