jquery navigation always opens the first option

Question

I have a nav element which is something like this:

<ul>
    <li name='first_item'>
        <ul>
            <li>item 1</li>
                <ul>
                    <li>item 1.1</li>
                    <li>item 1.2</li>
                </ul>
            <li>item 2</li>
        </ul>
    </li>
</ul>
<ul>
    <li>
        <ul>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </li>
</ul>

and the code that handles the the sliding down and up is:(nav is a html element which is a parent of above)

nav.find("li").each(
    if ($(this).find("ul").length > 0) {
    _callback = false;
    $("<span>").text("^").appendTo($(this).children(":first"));
         //show subnav on hover
         $(this).mouseenter(function() {
             $(this).find("ul").stop(true, true).slideDown();
     });
         //hide submenus on exit
         $(this).mouseleave(function() {
             $(this).find("ul").stop(true, true).slideUp();
     });
     }
 });

what happens is when I hover over the first_item it opens the sub menus and after it's finished sliding down them, it will open item 1's sub menus as well. I'm totally lost over this. Any help would be appreciated.

Answer 1

First of all, it seems you copyied the jquery without the function, so that isnt the problem:

nav.find("li").each(function(){

I think the problem is, that you travel to deep, so try this:

$(this).find(">ul")

or this:

$(this).children("ul")

From jQuery: The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.