apply jquery effect to parent li but not to child li element

Question

My html markup is as below:

<ul class="top-nav">
   <li id="page-1"><a href="/">HOME</a>
        <ul class="page-1 current">
                <li><a title="" href="#">FEATURES</a></li>
                <li><a title="" href="#">ABOUT US</a></li>
                <li><a title="" href="#">CONTACT</a></li>
        </ul>
    </li>

    <li id="page-2"><a title="" href="road">ROAD</a>
        <ul class="page-2">
                <li><a title="" href="#">ROAD BIKE:</a></li>
                <li><a title="" href="#">BIKE</a></li>
                <li><a title="" href="#">COMPONENTS</a></li>
                <li><a title="" href="#">APPAREL</a></li>               
        </ul>
    </li>
</ul>

on mouseover over first level li (jQuery('.top-nav li')), it should show its child ul (jQuery('.top-nav li ul'))

But problem is that , when I mouseover on child li elements of first level li, same event occur for child li also. I want to avoid this event for child li elements (i.e., (jQuery('.top-nav li ul li')).

Answer 1

You can address immediate elements like this:

$("ul.top-nav > li"); // only the top-level li's