Question

when i hover on div#new-menu-lower ul.menuul li.menuli i want to add display block to the first ul and first li in the code below. The problem is its adding display block/none to all the ul and li.

 $(document).ready(function() {
    //on hover of sub menu li then highlight itself
    $('div#new-menu-lower ul.menuul li.menuli').hover(

    function() {
        $('div#new-menu-lower ul li ul:first').css("display","block");
        $('div#new-menu-lower ul li ul li:first').css("display","block");
        $('div#new-menu-lower ul li ul li ul:first').css("display","block");

    }, function() {
        $('div#new-menu-lower ul li ul:first').css("display","none");
        $('div#new-menu-lower ul li ul li:first').css("display","none");
        $('div#new-menu-lower ul li ul li ul:first').css("display","none");
    })
});

If i hover on the 2nd UL LI then it will only show the FIRST ul li ul li and thats wrong.

I have managed to solve part of it by doing:
(it now adds display:block to the submenu which is – ul li ul but i it wont add it to the other elements)

$(document).ready(function() {
    //on hover of sub menu li then highlight itself
    $('div#new-menu-lower ul.menuul li.menuli').hover(

    function() {
        $(this).children('div#new-menu-lower ul li ul').css("display","block");
        $(this).children('div#new-menu-lower ul li ul li:first').css("display","block");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","block");

    }, function() {
        $(this).children('div#new-menu-lower ul li ul').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li:first').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","none");
    })
});

Answer 1

just use :first instead of :first-child

or use the > selector