下拉菜单/子菜单上的问题，hover 不起作用？

Question

I have an issue with my dropdown menu: it isn't working. However, my menu IS. The links don't work properly either, they take me to the page but not the section.

If I take out display: none on the dropdown menu CSS it does show my menu, but not as a dropdown. The menu is properly coded and there I guess, but it somehow doesn't display correctly.

<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

It's semantically not correct to add div inside ul . Add submenu inside the parent li to which submenu belongs.

 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

I use javascript to make drop down menues. Take the dropdown menu display: none; . To show drop down menu you have to do something, like click to an icon. So you have to import an icon or add a button and use 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>

than you have to write in CSS what hapens when.Submenu will be active:

.Submenu.active {
display: block;
}

Here an exemple from my last project:

<script type="text/javascript">
        $(".menu-toggle-btn").click(function(){
          $(this).toggleClass("fa-times");
          $(".navigation-menu").toggleClass("active");
        });

If you want to when you click on an icon and the menu drops down the icon will change to another you have to write this to your javascript script: $(this).toggleClass("fa-times"); . toggleClass("here comes your icons class name ");

If you have any other questions feel free to ask.