jQuery only apply to current li

Question

I want to slide toggle the second level ul when I mouse over the relevant first level li.

Currently the script displays all secondary ul on a mouseover.

<div id="subNav">
<ul>
   <li>One</li>
       <ul>
           <li>SubOne</li>
       </ul>
   </li>
   <li>Two</li>
   <li>
       <ul>
           <li>SubTwo</li>
       </ul>
   </li>
</ul>
</div>

And here is my jQuery

$("#sideNav ul li").hover(
        function(){
            $('#sideNav ul li ul').slideDown();
        },
        function(){
            $('#sideNav ul li ul').slideUp();
        }
    );

Answer 1

You need to target with $(this) inside the function.

$("#subNav>ul>li").hover(
    function(){
        $(this).children('ul').slideDown();
    },
    function(){
        $(this).children('ul').slideUp();
    }
);

Note: The above will work from the root ul's only. I assume that is what you want to do.

Answer 2

try:

$(this).find('ul')

I haven't tested this.

HTH