Question

So I am trying to create a slide down menu where the parent item slides down with the item. The only way I’ve figured to do it is to have the main menu item at the bottom and the sub items on top. This is not preferred but it seems to work.

Right now the problem is that the menu seems to be jumpy/not smooth if you mouse over the wrong part of it. Is there any way to have have the main menu item at top and stop it from being so jumpy?

A jsFiddle is here

Here is the HTML:

<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item </li>
</ul>
<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item 2 </li>
</ul>

And the CSS:

ul ul li {
    display: none;
}

ul {
    display:inline;
    float:left;
    width:150px;
}

Lastly the jQuery

$("ul").hover(

function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
    $(this).find('ul li').stop(true, true).slideUp();
}

);

EDIT

So it appears one of the probems is the invalid markup. It was suggested to just use Javascript to move the first li tag to the bottom of the section. I have an example that works on click only of the first li. That fiddle can be found here Ideally I want it to work without click and with valid markup.

Here is the updated JS

    $("ul li:first").click(function() {

  $(this).parent().append($(this));

});

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);​

Answer 1

It seems the Winner is this JavaScript

$("ul li:first-child").not("ul li li").hover(function() {

  $(this).parent().append($(this));

});   

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);