jquery current parent and child selectors

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 1

$('#nav .parent-item').click(function() {

    $(this).children('ul').slideToggle();
    return false;

});

Demo : click here

Answer 2

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.

Answer 3

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/