比较省事儿的高亮 JQuery 菜单

思路还是传统思路ul+li+a的方式

html代码

<div>
        <ul id="nav">
            <li><a href="#1">菜单1</a></li>
            <li><a href="#2">菜单2</a></li>
            <li><a href="#3">菜单3</a>
                <ul>
                    <li><a href="#31">菜单31</a></li>
                    <li><a href="#32">菜单32</a></li>
                    <li><a href="#33">菜单33</a>
                        <ul>
                            <li><a href="#331">菜单331</a></li><li><a href="#332">菜单332</a></li></ul>
                    </li>
                </ul>
            </li>
            <li><a href="#4" class="nav">菜单4</a></li>
            <li><a href="#5" class="nav">菜单5</a></li>
        </ul>
    </div>

css代码

body { font-size: 0.85em; font-family: Verdana, Arial, Helvetica, sans-serif; }
        #nav, #nav ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; line-height: 1.5em; }
        /*#nav a { display: block; padding: 0px 5px; border: 1px solid #333; color: #fff; text-decoration: none; background-color: #333; }
        #nav a:hover { background-color: #fff; color: #333; }*/
        #nav li { float: left; position: relative; }
        #nav ul { position: absolute; display: none; width: 12em; top: 1.5em; }
        #nav li ul a { width: 12em; height: auto; float: left; }
        #nav ul ul { top: auto; }
        #nav li ul ul { left: 12em; margin: 0px 0 0 10px; }
        /*#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; }
        #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; }*/
        .Hel {  background-color: #222; color: #333; }

js代码

<script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#nav li").click(function () {
                $(this).addClass("Hel").siblings().removeClass("Hel");//增加删除新样式
            });
            $(" #nav li").hover(function () {
                $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);//鼠标移动到上面设置其显示样式
            }, function () {
                $(this).find('ul:first').css({ visibility: "hidden" });//离开隐藏样式
            });
        });
    </script>