将jquery效果应用于父li，但不应用于子li元素

我的html标记如下所示：

<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>

在第一级li（jQuery（'.top-nav-li'）上方的鼠标上，它应该显示其子ul（jQuery（'.top-nav-li-ul'））

但问题是，当我将鼠标移到第一级li的child li元素上时，同样的事件也会发生在child li上。我希望避免子li元素（即（jQuery（'.top nav li ul li'））发生此事件。

您可以处理如下立即元素：

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

---

+1欢迎使用Stack Overflow，@saorabh。它不起作用，因为子元素也有相同的结构，即

ul>li

我已使其不那么模棱两可。请立即尝试。