ul li 美丽菜单

     

 <div id="dh_title" style=" 960px; height: 40px; background: url(dh.gif); text-align: center;">
            <ul class="db_c">
                <li class="showdh">Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
                <li>Menu</li>
            </ul>
        </div>

 <style type="text/css">
        .db_c
        {
            list-style-type: none;
            90%;
            margin-left: 5%;
        }
        .db_c li
        {
            list-style-type: none;
            text-align: center;
            float: left;
            85px;
            height: 25px;
            margin: 6px;
            line-height: 24px;
            border: 0px red solid;
            margin-left: 10px;
            color: White;
            font-weight: bold;
            font-size: small;
        }
        .db_c li:hover
        {
            color: White;
            font-weight: bold;
            font-size: small;
            cursor: pointer;
            background: url(nav_over.gif);
        }
        .showdh
        {
            background: url(nav_over.gif);
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("ul li", "#dh_title").click(function() {
                $("ul li", "#dh_title").each(function() {
                    $(this).removeClass("showdh");
                });
                $(this).addClass("showdh");
            });
        });
    </script>