CODEWITHSUNDEEP
javascripthtmljquerycsstwitter-bootstrap
Judit
Judit

Reputation: 13

Issues on the dropdown menu / Submenu, hover isn't working?

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>

Upvotes: 0

Views: 247

Answers (2)

Master.Deep
Master.Deep

Reputation: 812

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>

Upvotes: 2

Zasszel
Zasszel

Reputation: 1

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.

Upvotes: 0

Related Questions