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 styles

 <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/

在悬停时显示多个兄弟姐妹

1 个答案: