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

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 {

  width: 100%;

  flex: 1;

}

nav ul {

  display: flex;

  flex-flow: row wrap;

  list-style: none;

  padding-top: 4%;

  margin: 0;

}

nav ul li {

  padding: 1em 4em;

}

nav ul li a {

  text-decoration: none;

  margin-right: auto;

  color: #000;

  font-size: 17px;

}

nav ul li a:hover {

  border-bottom: 2px solid #724c20;

}

li.logo {

  margin-right: auto;

}

.Submenu {

  display: none;

}

nav ul li:hover .Submenu {

  display: block;

  background-color: #724c20;

  position: absolute;

  margin-top: 15px;

  margin-left: -15px;

}

nav ul li:hover .Submenu ul {

  display: block;

  margin: 10px;

}

nav ul li:hover .Submenu ul li {

  width: 150px;

  padding: 10px;

  border-bottom: 1px;

  background: transparent;

  border-radius: 0;

  text-align: center;

}

nav ul li:hover .Submenu ul li:last-child {

  border-bottom: none;

}

nav ul li:hover .Submenu ul li a:hover {

  color: #d1b9a5;

}

<nav>

  <ul class="menu">

    <li class="logo">

      <a href="..."><img src="..." class="logo" alt="..."></a>

    </li>

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

        <div class="Submenu">

            <ul>

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

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

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

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

            </ul>

        </div>

    </li>

    

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

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

    <div class="Submenu">

      <ul>

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

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

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

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

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

      </ul>

    </div>

</li>

    

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

  </ul>

</nav>

Answer 2

我使用 javascript 制作下拉菜单。选择下拉菜单display: none;。要显示下拉菜单，您必须执行某些操作，例如单击图标。所以你必须导入一个图标或添加一个按钮并使用javascript：

<script type="text/javascript">

        $("*here comes your icon's/div's/button's id/class name you want*").click(function(){

          $(".Submenu").toggleClass("active");

        });

    </script>

比你必须在 CSS 中编写 .Submenu 处于活动状态时会发生什么情况：

.Submenu.active {

display: block;

}

这是我上一个项目的示例：

<script type="text/javascript">

        $(".menu-toggle-btn").click(function(){

          $(this).toggleClass("fa-times");

          $(".navigation-menu").toggleClass("active");

        });

如果你想，当你点击一个图标并且下拉菜单中的图标将更改为另一个图标时，你必须将其写入你的 javascript 脚本中： $(this).toggleClass("fa-times");。toggleClass("here comes your icons class name ");

如果您有任何其他问题，请随时询问。