CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
DRY
DRY

Reputation: 13

how to make dropdown keep open on hover and disappear when leave it

i really need help. i tried but it is still not working. i want to make a dropdown menu that will appear on hover and will disappear when leave that dropdown. 

$(document).ready(function(){
	$('.navigation-menu').mouseenter(function(){
  	$('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
  	$('.navigation-dropdown').removeClass('visible');
  });
});
ul{
  margin: 0;
}
.container{
  background-color: rgb(0,0,0);
  height: 30px;
  padding: 10px;
}
.container-dropdown{
  background-color: rgb(125,125,125)
}
.dropdown-menu{
  display: inline-block;
}
.navigation-dropdown{
  display: none;
}
.navigation-menu{
  display: inline-block;
  height: 100%;
}
.visible{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header"> 
  <div class="container">
    <img src="" alt="">
    <div class="navigation">
      <ul>
        <li class="navigation-menu"><a href="">home</a></li>
        <li class="navigation-menu"><a href="">home</a></li>
        <li class="navigation-menu"><a href="">home</a></li>
      </ul>
    </div>
  </div>
  <div class="navigation-dropdown">
    <div class="container-dropdown">
      <ul>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
      </ul>
    </div>
  </div>
</header>

So, i just want to make that gray div disappear when i move my mouse leave the navigation-menu class

my problem: i have to move the mouse to the gray div first to make the gray div disappear. all i want is make the gray div can disappear without have to move the mouse to the gray div first

Upvotes: 0

Views: 2032

Answers (1)

user1531038
user1531038

Reputation: 266

There are much better design options for you to look forward to, to get what you want. But if you just want to stick to the current layout and design, I would make a couple of changes to get what you are looking for.

.container{
  background-color: rgb(0,0,0);
  height: 20px;
  padding: 10px;
  padding-bottom: 0px; --to remove any space between menu title and the dropdown
}

and 

$(document).ready(function(){
    $('.navigation-menu').mouseenter(function(){
    $('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
    $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-dropdown').mouseenter(function(){
      $('.navigation-dropdown').addClass('visible');
  });

  $('.navigation').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-menu').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });
});

to hide dropdown menu if mouse leaves navigation div.

hope this helps.

Upvotes: 2

Related Questions