显示：无； 显示： 不会工作

Question

因此，我有此列表，其中只有列表中的第一项可见。 当我将鼠标悬停在第一项上时，我希望能够看到其他项。 下面是我的代码，但它不起作用。 悬停后，没有任何反应。

这是清单：

 #manage { float: right; padding: 0px; margin: 0px; } #manage li { width: 100px; height: 30px; background-color: Aqua; text-align: center; list-style-type: none; } #header ul a { font-size: 25px; font-weight: normal; padding: 0px; margin: 0px; text-decoration: none; color: White; } .sub { margin-top: 3px; display: none; } li:hover .sub { display: block; } 

 <ul id="manage"> <li><a href="#">managment</a> </li> <li class="sub"><a href="#">Add</a> </li> <li class="sub"><a href="#">Edit</a> </li> <li class="sub"><a href="#">Account</a> </li> </ul> 

Answer 1

稍微调整一下CSS即可使其生效。

如果您将第一个li用作悬停目标，则当前CSS选择器不仅会尝试选择子元素而不是同级元素，而且当您将鼠标悬停在任何现在可见的li元素上时，元素也会立即消失，因此请重新将CSS选择器定位到父ul#manage元素。

#manage:hover  .sub
{
    display:block;
}

 #manage { float:right; padding:0px; margin:0px; } #manage li { width:100px; height:30px; background-color:Aqua; text-align:center; list-style-type:none; } #header ul a { font-size:25px; font-weight:normal; padding:0px; margin:0px; text-decoration:none; color:White; } .sub { margin-top:3px; display:none; } #manage:hover > .sub { display:block; } 

 <ul id="manage"> <li><a href="#">managment</a></li> <li class="sub"><a href="#">Add</a></li> <li class="sub"><a href="#">Edit</a></li> <li class="sub"><a href="#">Account</a></li> </ul> 

Answer 2

尝试将这些列表项添加到第一个列表项内的无序列表中

<ul id="manage">
    <li><a href="#">managment</a>
        <ul class="sub">
             <li><a href="#">Add</a></li>
             <li><a href="#">Edit</a></li>
             <li><a href="#">Account</a></li>
        </ul>
    </li>
 </ul>

而在你的CSS

.sub 
{
    margin-top:3px;
    display:none;
}
li:hover .sub
{
    display:block;
}

Answer 3

您的错误在于最后一条规则：

li:hover .sub

请尝试：

ul:hover li.sub