display block display none issues using jquery
<p>when i hover on <code>div#new-menu-lower ul.menuul li.menuli</code> 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.</p>

<pre><code> $(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");
    })
});
</code></pre>

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

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

<pre><code>$(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");
    })
});
</code></pre>
