jQuery下级菜单

来源：互联网发布：mac怎么下b站视频知乎编辑：程序博客网时间：2024/06/05 00:16
jQuery下级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery下级菜单</title>    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <style type="text/css">    * {        margin: 0;        padding: 0;    }        body {        font-size: 12px;    }        li {        list-style: none;    }        ul.nav li {        width: 200px;        text-align: center;        float: left;        margin-right: 10px;    }        ul.nav li h3 {        height: 40px;        line-height: 40px;        background: #72a7ff;    }        ul.nav li ul li h3 {        background: #ffd9d9;    }        ul.nav li h3:hover,    .choice {        background: #ffc0c0!important;    }        ul li ul {        display: none;    }        ul li.on ul {        display: block;    }        ul.nav li {        position: relative;    }        ul.nav li ul li ul {        position: absolute;        top: 0;        right: -200px;    }    </style>    <script>    $(document).ready(function() {        $("ul.nav li").hover(function() {                $(this).addClass("on");            },            function() {                $(this).removeClass("on");            })        $("ul.nav li").hover(function() {                $(this).parent("ul").siblings("h3").addClass("choice");            },            function() {                $(this).parent("ul").siblings("h3").removeClass("choice");            })    });    </script></head><body>    <ul class="nav">        <li>            <h3><a href="">我的网站</a></h3>            <ul>                <li>                    <h3>2级分类</h3>                </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3></li>            </ul>        </li>        <li>            <h3>我的网站</h3>            <ul>                <li>                    <h3>2级分类</h3>                </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3></li>            </ul>        </li>        <li>            <h3>我的网站</h3>            <ul>                <li>                    <h3>2级分类</h3>                </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3> </li>                <li>                    <h3>2级分类</h3></li>            </ul>        </li>        <li>            <h3>我的网站</h3> </li>    </ul></body></html>
0 0