1

I have a Hover function that shows and hides my sub menus until a person hovers on them.

Problem is that when I try to move the mouse down to the menu that shows it disappears again.

Can anyone point out what im doing wrong here.?

$(document).ready(function() {
  $('.menu-Link > a').hover(function() {
    $(this).next('.menu').show();
  }, function() {
    $(this).next('.menu').hide();
  });
});
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background-color: #333333;*/
  background-color: transparent;
  transition: 0.2s;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  display: inline-block;
}
nav ul li {
  float: left;
}
nav ul li a.link {
  display: block;
  color: black;
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
  transition: 0.2s;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}
nav ul li div.arrow-down {
  float: right;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  margin-top: 10px;
  transition: 0.2s;
}
nav ul li div.menu {
  display: none;
  z-index: 999;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  padding: 15px 0;
  margin-top: -15px;
}
nav ul li div.menu a {
  color: #333333;
  padding-left: 15px;
}
nav ul li a.link:hover {
  color: #808080;
  text-decoration: none;
  transition: 0.2s;
}
nav ul li a.link:hover div.arrow-down {
  border-top: 5px solid #808080;
  transition: 0.2s;
}
nav ul li:first-child {
  padding-left: 100px;
}
nav ul.right {
  float: right;
}
nav ul.right li:last-child {
  padding-right: 100px;
}
nav.color {
  background-color: #333333;
  transition: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="left">
    <li class="menu-Link">
      <a href="" class="link">Home</a>
      <div class="menu">
        <a href="">subcat.Title</a>
      </div>
    </li>
    <li class="menu-Link">
      <a href="" class="link">Test</a>
      <div class="menu">
        <a href="">subcat.Title</a>
      </div>
    </li>
  </ul>
  <ul class="right">
    <li><a href="/">Basket</a>
    </li>
  </ul>
</nav>

Improve this question
1

1 Answer 1

Reset to default
5

The issue is because the event is attached to the a element, therefore when the user tries to mouse over the menu which appears the mouseout part of hover is called on that a and the JS code tries to hide the menu again. To fix this, attach the hover() event to an element which holds both the a and the menu. In this case, the .menu-link element itself. You will also need to change next() to find() to cater for the change. Try this:

$(document).ready(function() {
  $('.menu-Link').hover(function() {
    $(this).find('.menu').show();
  }, function() {
    $(this).find('.menu').hide();
  });
});
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background-color: #333333;*/
  background-color: transparent;
  transition: 0.2s;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  display: inline-block;
}
nav ul li {
  float: left;
}
nav ul li a.link {
  display: block;
  color: black;
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
  transition: 0.2s;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}
nav ul li div.arrow-down {
  float: right;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  margin-top: 10px;
  transition: 0.2s;
}
nav ul li div.menu {
  display: none;
  z-index: 999;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  padding: 15px 0;
  margin-top: -15px;
}
nav ul li div.menu a {
  color: #333333;
  padding-left: 15px;
}
nav ul li a.link:hover {
  color: #808080;
  text-decoration: none;
  transition: 0.2s;
}
nav ul li a.link:hover div.arrow-down {
  border-top: 5px solid #808080;
  transition: 0.2s;
}
nav ul li:first-child {
  padding-left: 100px;
}
nav ul.right {
  float: right;
}
nav ul.right li:last-child {
  padding-right: 100px;
}
nav.color {
  background-color: #333333;
  transition: 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="left">
    <li class="menu-Link">
      <a href="" class="link">Home</a>
      <div class="menu">
        <a href="">subcat.Title</a>
      </div>
    </li>
    <li class="menu-Link">
      <a href="" class="link">Test</a>
      <div class="menu">
        <a href="">subcat.Title</a>
      </div>
    </li>
  </ul>
  <ul class="right">
    <li><a href="/">Basket</a>
    </li>
  </ul>
</nav>

Also note that you can achieve this in CSS alone without the need for any JS code, simply remove the hover() handler and add this line to your CSS:

nav ul li:hover div.menu {
  display: block;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.