html - 悬停显示多个兄弟姐妹

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.2....3.n 的所有其他锚点时，这只显示子菜单的第一个锚点（3.1），我该如何实现？

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/