Search code examples
javascriptjquerymouseout

Losing dropdown list info on mouseout

I have built a simple dropdown list which I populate with various links. It contains about 50 items, so I wrapped it in a div to make it scrollable. Problem is, when I mouseout, I lose the whole list, unless the first two list elelments are showing. I have constructed this dropdown as a submenu, with the first two links as the 'container' of sorts.

I somewhat understand why I am losing the entire list, but can't figure out how to make the top links reapear on mouseout.

    $('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() { 
         $('.myMenu').css('overflow','auto');
         $('.myMenu').css('height','400px');
         $('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
         $('.myMenu').css('overflow','hidden');
         $('.myMenu').css('height','20px');
       $('.ulMenu').css('visibility', 'hidden');
  }
}
</script>




<div id="menu">
  <ul class="myMenu">
    <li id="li_left"><a href="#">   Application </a></li>
      <li id="li"> <a href="#"> Hover For Listing</a>
          <ul id="tasksUl" class="ulMenu">
          </ul>
        </li>
    </ul>
</div>
Solution

  • I think you also have to post your .css for the list. I think you got a menu and you wanna open a list on hovering <li id="li"> <a href="#"> Hover For Listing</a>

    You are setting a

    $('.myMenu').css('height','20px');

    and I don't get why you would do that. Also your .css styles are pretty much deprecated.

    Check the fiddle here: http://jsfiddle.net/eR2y9/1/

    Works like a charm. There is no need for you to add a height for the menu because it's dynamically adjusting depending on the amount of entries inside. Also if set to display none it's not taking any space away.. If you have further questions or if I misunderstood your problem feel free to reply to my post and I will find a solution for ya.