Question

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

这是清单：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

对CSS的一个小调整可以使其发挥作用。

如果你的第一个li针对悬停，那么当前的CSS选择器不仅会尝试选择子元素而不是兄弟元素，但是当你将鼠标悬停在任何一个元素上时，你的元素会立即消失可见的li元素，因此请将CSS选择器重新定位到父ul#manage元素。

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

display：none;显示：块;不会工作

3 个答案: