案例：新浪下拉菜单功能

<!-- 页面布局 -->
<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论/a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论/a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论/a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
   </li>
</ul>

<!-- JS逻辑代码 -->
<script>
    $(function() {
        // 鼠标经过
        $(".nav>li").mouseover(function() {
            // $(this) 表示jQuery的当前元素，注意this不要加引号
            // show()显示元素  hide()隐藏元素
            $(this).children(‘ul‘).show();
        });
        // 鼠标离开
        $(".nav>li").mouseout(function() {
            $(this).children(‘ul‘).hide();
        });
    })
</script>