jquery dropdown simple problem?

Question

hey guys, i'm almost there but I'm not able to solve the last problem. I'm trying to create a simple dropdown menu with jquery on a Indexhibit page.

    $('#menu ul li.section-title').hover(
  function () {  
    $(this).parent().children().show('fast');
  },
  function () {
    $(this).parent().children().not(this).hide('fast');
  }
);

the structure of the menu looks like this:

<ul>
<li class="section-title">HEADER which triggers dropdown</li>
<li>element one</li>
<li>element two</li>
<li>element three</li>
</ul>

i want the section-title to trigger the hover event and it should display all li-children. That's working fine so far. However the navigation isn't quite working because I can't select a li-child. Everytime a hover-out the section-title the whole ul structure collapses again. What do I have to do to NOT trigger a hover-out if I'm hovering over each child of the menu?

I hope I'm not writing to confusing. regards matt

Answer 1

Capture the Hover event of the UL and then make sure your applying the Overflow:hidden style to the outer UL. Or

<ul><h2>section-title<h2>
    <li>element one</li>
    <li>element two</li>
    <li>element three</li>
</ul>

#menu ul li { display:none }

#menu ul { 
    overflow:hidden
    position:absolute or float:left  <-- Might need this
}

$('#menu ul').hover(
  function () {  
    $(this).children("li").show('fast');
  },
  function () {
    $(this).children("li").hide('fast');
  }
);