Question

I’ve got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:

function closeMenus() {
  $('.subMenu').css('display', 'none');
}

#mainMenu ul li .subMenu {
  display: none;
  position: absolute;
}
#mainMenu ul li:hover .subMenu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
  <ul>
    <li>
      Menu Header
      <div class="subMenu" onClick="closeMenus();">Menu Content</div>
    </li>
  </ul>
</div>

The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I’d like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn’t reappear. It appears that CSS won’t override the JavaScript display property. Most, if not all, of the links won’t be going to other pages, just calling more JavaScript.

Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Answer 1

You’re trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/

$('.subMenu').click(function() {
    $(this).hide();
});

$('#mainMenu').hover(function() {
    $(this).find('.subMenu').show();
}, function() {
    $(this).find('.subMenu').hide();
});