JQuery hover () hide / show causing bounce


It's a simple hide/show menu: When you mouseover a list item, the script shows any unordered lists that are children of that list item, and then displays. The CSS puts this sub-list to the immediate right of the list item hovered. When you mouseout, it hides that unordered list again.


<div class="menu-header-category-menu-container">
  <ul id="menu-header-category-menu" class="menu">
    <li id="menu-item-58"><a href="?cat=3">Parent Category I</a>
      <ul class="sub-menu">
        <li id="menu-item-59"><a href="?cat=6">Child Category I</a></li>
        <li id="menu-item-60">
          <a href="?cat=7">Child Category II</a>
          <ul class="sub-menu">
            <li id="menu-item-61"><a href="?cat=9">Grandchild Category I</a></li>
    <li id="menu-item-62"><a href="?cat=4">Parent Category II</a></li>
    <li id="menu-item-63">
      <a href="?cat=5">Parent Category III</a>
      <ul class="sub-menu">
        <li id="menu-item-64"><a href="?cat=8">Child Category III</a></li>
    <li id="menu-item-57"><a href="?cat=1">Uncategorized</a></li>

The CSS:

li {
    width: 150px;
    border: 1px solid black;
    background-color: aqua;
    list-style-type: none;
    position: relative;

ul.sub-menu {
    position: absolute;
    left: 110px;
    top: 0px;
    display: none;

The JavaScript:

$(document).ready(function() {
        function() { $(this).children('ul').show('slow'); },
        function() { $(this).children('ul').hide('slow'); }

It works mostly like it should. Except if you move the mouse from over the list item and leave it in the space where the sub-list should appear (before the sublist finishes showing) you get it stuck in a show/hide/show/hide repeating loop until you move the mouse cursor away.

I've tried to fix this using setTimeout() in both the mouseover argument's function and in the mouseout argument's function. I've also tried using conditions to check if the sublist is hidden in those arguments. I'm not seeing any performance difference.


This is a common problem, check out Hover Intent