if mouse on hover of div then display menu

I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.

Also if the mouse is hovered on the LI then check them menu down.

As you can see it just slides down and back up once you leave the "div".

Im stuck... and have tried for ho开发者_JAVA百科urs searching for if statements etc, i just cant get the syntax correct.

my example

Here is a working example

HTML

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Javascript/JQuery

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});

Make it a child of the <div>, then it won't cancel the event when you leave it.

Also I should note that it's more semantic to make a navigation out of nested lists (such as

• Category
  • Item
  • Item

<ul>
    <li>Category 
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>

^{I tried to fiddle in your fiddle, but the markup and css are a lot confusing.}

As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.

It does everything you want. However for the customizations and others things, I will leave it up to you.

http://jsfiddle.net/dttdB/13/

You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.