Question

I have decided to use floating div’s for my drop down menu because i can apply a shadow and rounded corners.

i have the following list item:

<li class="navDrop" id="navEvents"><a href="#">Events</a></li>

And the following div that corresponds to the menu item:

<div class="navSub" id="navEventsDrop"> Events </div>

I am currently using the following script to handle the show/hide of the elements (note that ive made it apply the handlers to a class, which links the li and corresponding div’s ids):

<script type="text/javascript">
$(".navDrop").mouseenter(
  function () {
    $('#'+this.id+'Drop').css({
          position:'absolute',
          top: $(this).offset().top + $(this).height() + 'px',
          left: $(this).offset().left + 'px',
          zIndex:1000
    }).show();
});

$(".navDrop").mouseleave(
  function () {
    $('#'+this.id+'Drop').hide();
});
</script>

My problem is that once the cursor has left the li, the div disappears, regardless if the cursor is over the div still.

I just cant figure a solution to this other than placing the div inside of the .navDrop class. But i tried doing that, and it just positions the div weirdly.

Thanks.

Answer 1

Try wrapping each element

<div class="navItem">
  <li class="navTitle" id="navEvents"><a href="#">Events</a></li>
  <div class="navContent" id="navEventsDrop" style="display:none"> Events </div>
</div>

Then the jQuery:

$('.navItem').mouseenter(function() {
   $(this).children('.navContent').show();
})

$('.navItem').mouseleave(function() {
   $(this).children('.navContent').hide();
})