下拉菜单/子菜单上的问题，悬停不起作用？答案

【问题标题】：Issues on the dropdown menu / Submenu, hover isn't working?下拉菜单/子菜单上的问题，悬停不起作用？
【发布时间】：2020-12-07 11:28:36
【问题描述】：

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

如果我在下拉菜单 CSS 中删除 display: none，它会显示我的菜单，但不会显示为下拉菜单。菜单编码正确，我猜是在那里，但不知何故无法正确显示。

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

【问题讨论】：

而不是使用 ul li 你应该使用 select 选项。

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

在ul 中添加 div 在语义上是不正确的。在子菜单所属的父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>

【讨论】：

【解决方案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>

当 .Submenu 处于活动状态时，您必须用 CSS 编写会发生什么：

.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 ");

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

【讨论】：