Question: I am having a slight trouble in selecting the correct current `<ul> <li>` selectors

```
$('#menu > li').on('mouseover', function (e) {
    $(this).find("ul:first").show();
    $(this).find('> a').addClass('active');
}).on('mouseout', function (e) {
    $(this).find("ul:first").hide();
    $(this).find('> a').removeClass('active');
});

```

in the above code I can find the `<ul id="menu">` and its `<li>` and even its first `<ul>`

Now I want to find the first `<ul>`'s all children `<ul>`. Like finding `ul` with id first `ul` and along with that all the other `ul` inside it till the `ul` with image.

I have just added the id for reference I'm not going to use that id.

```
<ul id="menu" class="clearfix"> <li><a href="#">Categories</a>
    <li class="purple">    
        <a href="#">Design</a>
        <ul id="firstul">
            <li><a href="#">Photoshop</a>
                <ul>
                    <li>    
                        <a href="#"> Photoshop CS</a>
                        <ul>
                            <li><img src="m3.jpg" width="200"></li>
                        </ul>  
                    </li>
                </ul>
           </li>
        </ul>  
    </li>
</ul>

```

A jsfiddle for the above working <https://jsfiddle.net/neerajsonar/yLtzrLm9/>

Also I need a jQuery for it not using css selectors and using `ul > li > ul` this isn't working for me or else I might be using it wrong while trying.

Answer: 
OK, I do something but there are a issue that i not understand:

take a look here.. <http://jsfiddle.net/yLtzrLm9/1/>

I edit your fiddle, so, right now: when the mouse enter in "Category" (or in an other element that has a ul like child) by default all of the first ul was shown.

... but there is but, if you select "category" > "Design" > "Illustrator" the submenu fadeOut. But if you do the same an other time all works fine. I don't know why. Try yourself.

### my change:

the use of `mouseenter` and `mouseleave` instead `mouseover` and `mouseout` to prevent double handler calling when you navigate the menu.

add a new class `_selected` that shown all the first inside a li, it will place when you navigate to category first li and remove when you change to an other subcategory that aren't the first.

This:

```
if(!$(this).is(":first-child") || $(this).parents("li:first-child").length !== $(this).parents("li").length-1) $(this).parents("li").not("li li").removeClass("_selected");

```

is a check to determinate if the element below the mouse cursor is visible because are in the flow of first elements.

Sorry but my english is too bad and it's hard to explain.
Using Frogmouth's answer I made some changes. I added the following

```
$(this).find("ul > li:first > ul:first").show();
 $(this).find("ul > li:first > ul:first > li:first > ul:first").show();
 $(this).find("ul > li:first > ul:first > li:first > ul:first > li:first >ul:first").show();

```

the `children();` wasn't working because the it was going to the innermost child and trying to show where as the parent isn't shown. 

I made a mega menu type structure that changes according to the sub menu items. the fiddle <https://jsfiddle.net/neerajsonar/4erto7c2/4/>