jQuery list item Menu -

we have main menu, consist of number or parent child items. want children uls hidden start with, on click of given li it's child ul shows.

you can see working degree here: http://jsfiddle.net/jnl58/12/

$("ul.nav_categories ul").hide();  $("ul.nav_categories li").click(function(el){     el.preventdefault();     var cur_el = $("> ul", this);     if (cur_el.length > 0) {         $("> ul", this).show();     } });  

the thing struggling hiding relevant ul's apart clicked elements parent ul's or sibling ul's.

so drop down menu http://jsfiddle.net/fjcct/4/ works on click rather rollovers :

$("ul.nav_categories ul").hide(); $("ul.nav_categories li").hover(function(){     if ($("> ul", this).length > 0) {         $("> ul", this).show();     } }, function(){     if ($("> ul", this).length > 0) {         $("> ul", this).hide();     } }); 

please note need work on varying levels, eg 2, 3, 4 , possibly 5 items deep. lists dynamic not know number of levels.

total edit. of course solution has super simple. :3

$("ul.nav_categories ul").hide();  $("ul.nav_categories li").click(function(){     $('li > ul').not($(this).parents('ul')).hide();     $(this).find('> ul').show();     return false; }); 

http://jsfiddle.net/bhnzc/3/