Question: I have a new problem.
I want to create a submenu with jquery for my joomla website.
The menu looks like this:

```
<ul id="submenu">
    <li><a href="#">Link</a></li>
    <li class="parent">
        <a href="#">Submenu 1</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li class="parent">
        <a href="#">Submenu 2</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
        <li class="parent">
        <a href="#">Submenu 3</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

```

So not all elements have child elements.
How can I do that?
I've tried it like this:

```
// hide all elements onload 
$("#submenu > li.parent > ul").hide();

$("#submenu li.parent").hover(function() {
    $(this).find("ul").slideDown("slow");
});

```

But I don't know how I can close the submenu if the user moves away from the menu with the mouse.
And I want to close the other openend menus before showing the submenu.
Can anybody help me?

Thanks

Answer: 
You can use `mouseenter/mouseleave`

```
$("#submenu li.parent").mouseenter(function() {
     $(this).find("ul").slideDown("slow");
}).mouseleave(function() {
     $(this).find("ul").slideUp("Slow");
});​

```

But I'd better go for pure CSS solution.

<http://jsfiddle.net/QEWvm/>

CSS3 sample solution: <http://jsfiddle.net/qzP7s/>
If going with the jQuery solution, I would at least recommend adding a `.stop()` before the `.slideUp()` to account for any mouse movements that may cause animations to queue up. So this code in the end 

```
    $("#submenu li.parent").mouseenter(function() {
     $(this).find("ul").slideDown("slow");
}).mouseleave(function() {
     $(this).find("ul").stop().slideUp("Slow");
});​

```

Fiddle here <http://jsfiddle.net/QEWvm/4/>

The problem with this approach though is that it isn't accessible, as `.hide()` sets `display:none` which screen readers will ignore. 

The better solution (if you can live without the animations, or want to use CSS3 to figure them out) would be using positioning and pseudoclasses to achieve something similar with something like this 

```
#submenu > li.parent > ul { position: absolute; left: -9999px; }

#submenu li.parent:hover ul {
  left: 90px;          
} 

```

This fiddle <http://jsfiddle.net/QEWvm/5/> shows it working.