html - 显示 : none; to display: block; won't work

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>