Question

li元素“投资组合”是我想悬停下来的标记。

但出于某种原因，当我将鼠标悬停在“投资组合”上时，没有任何事情发生下降

这是代码

#navmenu ul {
  position: absolute;
  visibility: hidden;
  top: 30px;
}

#navmenu .hoverme:hover ul {
  visibility: visible;
}

<div id="wrapper">

  <div id="navmenu">
    <div class="hoverme"><a href="#">Portfolio</a>
      <ul>
          <li><a href="#">Reviews</a>
          </li>
          <li><a href="#">Appendix</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Company</a>
          </li>
          <li><a href="#">Individual</a>
          </li>
          <li><a href="#">Cert of Att</a>
          </li>
          <li><a href="#">Skills Prof</a>
          </li>
          <li><a href="#">Csmr Visits</a>
          </li>
          <li><a href="#">Income</a>
          </li>
          <li><a href="#">Roles</a>
          </li>
        </ul>
     </div>
  </div>

</div>

任何帮助非常感谢。

Answer 1

您需要在孩子li之后关闭ul与投资组合，否则您的HTML标记无效，因为您不能将ul作为ul的直接孩子

来自Specs

内容模型：

零个或多个li和支持脚本的元素。

#navmenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 30px;
}
#navmenu ul li:hover ul {
  visibility: visible;
}

<div id="wrapper">
  <div id="navmenu">
    <ul>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">Reviews</a>
          </li>
          <li><a href="#">Appendix</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Company</a>
          </li>
          <li><a href="#">Individual</a>
          </li>
          <li><a href="#">Cert of Att</a>
          </li>
          <li><a href="#">Skills Prof</a>
          </li>
          <li><a href="#">Csmr Visits</a>
          </li>
          <li><a href="#">Income</a>
          </li>
          <li><a href="#">Roles</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS li：悬停能见度：可见;菜单没有下降

1 个答案: