下拉菜单/子菜单出现问题，悬停不起作用？

Question

我的下拉菜单有问题：它不起作用。然而，我的菜单是。这些链接也无法正常工作，它们将我带到该页面，但不是该部分。

如果我取出display: none下拉菜单 CSS，它会显示我的菜单，但不会显示为下拉菜单。我猜菜单已正确编码，但不知何故无法正确显示。

<nav>

  <ul class="menu">

    <li class="...">

      <a href="...">...</a>

    </li>

    <li class="item"><a href="...">..</a></li>

    <div class="....">

      <ul>

        <li><a href="...">...</a></li>

        <li><a href="....">..</a></li>

        <li><a href="..">...</a></li>

        <li><a href="...">...</a></li>

      </ul>

    </div>

    <li class="item"><a href="...">...</a></li>

    <li class="item"><a href="...">...</a></li>

    <li class="item"><a href="..">..</a></li>

  </ul>

</nav>

Answer 1

在 内部添加 div 从语义上来说是不正确的ul。在子菜单所属的父li内添加子菜单。nav {&nbsp; width: 100%;&nbsp; flex: 1;}nav ul {&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; list-style: none;&nbsp; padding-top: 4%;&nbsp; margin: 0;}nav ul li {&nbsp; padding: 1em 4em;}nav ul li a {&nbsp; text-decoration: none;&nbsp; margin-right: auto;&nbsp; color: #000;&nbsp; font-size: 17px;}nav ul li a:hover {&nbsp; border-bottom: 2px solid #724c20;}li.logo {&nbsp; margin-right: auto;}.Submenu {&nbsp; display: none;}nav ul li:hover .Submenu {&nbsp; display: block;&nbsp; background-color: #724c20;&nbsp; position: absolute;&nbsp; margin-top: 15px;&nbsp; margin-left: -15px;}nav ul li:hover .Submenu ul {&nbsp; display: block;&nbsp; margin: 10px;}nav ul li:hover .Submenu ul li {&nbsp; width: 150px;&nbsp; padding: 10px;&nbsp; border-bottom: 1px;&nbsp; background: transparent;&nbsp; border-radius: 0;&nbsp; text-align: center;}nav ul li:hover .Submenu ul li:last-child {&nbsp; border-bottom: none;}nav ul li:hover .Submenu ul li a:hover {&nbsp; color: #d1b9a5;}<nav>&nbsp; <ul class="menu">&nbsp; &nbsp; <li class="logo">&nbsp; &nbsp; &nbsp; <a href="..."><img src="..." class="logo" alt="..."></a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="item"><a href="...">..</a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="Submenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </li>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <li class="item"><a href="...">..</a></li>&nbsp; &nbsp; <li class="item"><a href="...">..</a>&nbsp; &nbsp; <div class="Submenu">&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="..">..</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></li>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <li class="item"><a href="..">..</a></li>&nbsp; </ul></nav>

Answer 2

我使用 javascript 制作下拉菜单。选择下拉菜单display: none;。要显示下拉菜单，您必须执行某些操作，例如单击图标。所以你必须导入一个图标或添加一个按钮并使用javascript：<script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $("*here comes your icon's/div's/button's id/class name you want*").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".Submenu").toggleClass("active");&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>比你必须在 CSS 中编写 .Submenu 处于活动状态时会发生什么情况：.Submenu.active {display: block;}这是我上一个项目的示例：<script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(".menu-toggle-btn").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).toggleClass("fa-times");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".navigation-menu").toggleClass("active");&nbsp; &nbsp; &nbsp; &nbsp; });如果你想，当你点击一个图标并且下拉菜单中的图标将更改为另一个图标时，你必须将其写入你的 javascript 脚本中： $(this).toggleClass("fa-times");。toggleClass("here comes your icons class name ");如果您有任何其他问题，请随时询问。