So, i've seen some other answers for similar stuff, but nothing that really helps or even works, I've tried to follow every step people said in other posts but nothing helped. I wanna show a sub menu when I hover over it by removing the class hidden that it is defining its display to hiden, but I can´t make it using only css and, even though my js code recognizes that the mouse is hovering through it, it won´t budge. So, here's my codes

$(".dropdown").hover(function() {
  console.log('hover in');
  $(".dropdown-content").removeClass("hidden");
  console.log('hover out');
  $(".dropdown-content").addClass("hidden");
})

.hidden {
  display: none;
}

.menu-desktop {
  position: absolute;
  left: 70%;
  list-style-type: none;
}

.menu-desktop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-desktop a {
  display: inline;
  float: left;
  margin-left: 5px;
  color: #bcbcbc;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background-color: transparent;
  border-radius: 0%;
  border-color: transparent;
}

.menu-desktop a:hover {
  color: #858181
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
}

.dropdown-content .shown {
  position: absolute;
  background-color: blue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav >
  <div >
    <img src="assets/9mnb2mazqne71.png" alt="">
  </div>
  <!-- Navigation menu -->
  <ul id="nav" >
    <li><a href="#">HOME</a></li>
    <li ><a href="#">EMPRESA</a></li>
    <ul id="submenu" >
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li ><a href="#">submenu 1</a></li>
      <ul id="submenu2" >
        <li><a href="#">submenu 2</a></li>
        <li><a href="#">submenu 2</a></li>
        <li><a href="#">submenu 2</a></li>
        <li><a href="#">submenu 2</a></li>
      </ul>
    </ul>
    <li><a href="#">CLIENTES</a></li>
    <li><a href="#">CONTATO</a></li>
  </ul>
</nav>

EDIT: Forgot to include my css, so, here it is!

CodePudding user response：

You need to declare function inside hover() to handle hover in & out event:

$( ".dropdown" ).hover(
  function() {
     $(".dropdown-content").removeClass("hidden");
  }, function() {
     $(".dropdown-content").addClass("hidden");
  }
);

CodePudding user response：

The problems with your code

Main problem

You immediately add the class back after removing it, so you never see the dropdown content.

jQuery's .hover() expects two function arguments (first is run when mouse enters, second when mouse leaves).

direct-child-only problem

Second problem with your code is that it toggles the class on all submenus while the one you want is only the direct, immediate child of the list item being hovered. You can use

$(this).find(".dropdown-content").first()

to only affect the sub-ul you want. Alternatively, instead of .first(), you can also use .eq(0).

Invalid html problem

Please also note that ul can only have li children, so you need to wrap any sub-ul inside an li.

The solution to not use

$(".dropdown").hover(
  function() {
     $(this).find(".dropdown-content").first().removeClass("hidden");
  }, 
  function() {
     $(this).find(".dropdown-content").eq(0).addClass("hidden");
  }
);

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" >
  <li><a href="#">HOME</a></li>
  <li ><a href="#">EMPRESA</a>
    <ul id="submenu" >
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li ><a href="#">submenu 1</a>
        <ul id="submenu2" >
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">CLIENTES</a></li>
  <li><a href="#">CONTATO</a></li>
</ul>

The solution to use is CSS only

That being said, you don't need any JavaScript for this, and you shouldn't be using JS for a CSS job:

.dropdown-content {
  display: none;
}

.dropdown:hover > .dropdown-content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" >
  <li><a href="#">HOME</a></li>
  <li ><a href="#">EMPRESA</a>
    <ul id="submenu" >
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li><a href="#">submenu 1</a></li>
      <li ><a href="#">submenu 1</a>
        <ul id="submenu2" >
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
          <li><a href="#">submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">CLIENTES</a></li>
  <li><a href="#">CONTATO</a></li>
</ul>