I have a list navigation. the subnav is hidden and should be showed on mouseover. (I tried mouserover, mouseenter and hover..)

None worked really. The problem is, it is jumping. If I hover quickly on all the elements they all want to slideDown and up and that's just uggly.

So I tried to queue() the elements to see if the animation (the slide down or up) is finished to show next. Now queue is always just pointing on the first list-item.

How can I use queue() correctly to see one queue for all the elements?

Or what is the best to way to do it? The only has to be is: It has to be a slideDown. Just setting display:block or hidden doesn't looks nice enough...

[the fiddle is here](http://jsfiddle.net/caramba/JvLmZ/1/)

```
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<style type="text/css">

ul.main-nav {
    margin: 0; padding: 0;
    text-align: center;
}
ul.main-nav li.main-nav {
    width:111px;
    height:35px;
    list-style: none;
    float: left;
    position: relative;
    padding: 10px 15px 20px 14px;
    margin:0 0 0 1px;
}
ul.main-nav li.main-nav ul.icon.subnav {
    position: absolute;
    width:140px;
    padding-bottom:0px;
    text-align: left;
    display: none;
}
ul.main-nav li.main-nav ul.subnav li {
    float: none;
    display: block;
    border-bottom:1px solid #434343;
}
ul.main-nav a {
    display:block;
}
ul.main-nav ul.subnav li a {
    padding: 8px 5px 8px 10px;
}
</style>
<span class="queue"></span>
<ul class="main-nav">
    <li class="main-nav active">
        <a class="main-nav" href="#">main-nav-1</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-2</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-3</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-4</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
<div class="clear"></div>
</ul>

<script>
$(document).ready(function() {
    var subnav = $("ul.subnav");
    function showIt() {
        var n = subnav.queue("fx");
        $("span.queue").text( n.length );
        setTimeout(showIt, 20);
    }
    showIt();

    $('li.main-nav').hover(function () {
        $(this).children('ul').slideDown(600,function(){});
    },function () {
        $(this).children('ul').slideUp(600,function(){});
    });

});
</script>
</body>
</html>

```

Help would be much appreciated. Thanks a lot for looking and answering and any suggetions.