Jquery实现内联下拉菜单效果（一个小test）

1：主要学习实现这种菜单的方法之一

结构:<ul>

　　　　<li>

　　　　　　<ul>

　　　　　　</ul>

　　 </li>

　　　　<li>

　　　　　　<ul>

　　　　　　</ul>

　　 </li>

</ul>

    <style type="text/css">
        ul li{
            background-color: aquamarine;
            float: left;
            margin-left: 5px;
        }

        li ul, li ul li{
            background-color: pink;
            text-indent: 30px;
        }
        li ul li{
           float: none;
        }

    </style>

    <script>

       $(function () {
           $("#one").mousemove(function () {
               $("#one_ul").css("display","block");
           }).mouseout(function () {
               $("#one_ul").css("display","none");
           });

           $("#tow").mousemove(function () {
               $("#tow_ul").css("display","block");
           }).mouseout(function () {
               $("#tow_ul").css("display","none");
           });

           $("#thr").mousemove(function () {
               $("#thr_ul").css("display","block");
           }).mouseout(function () {
               $("#thr_ul").css("display","none");
           });

       })

    </script>
</head>
<body>

    <div class="warp">
        <ul>
            <li>
                <h2 id="one">第一个标签选择</h2>
                <ul id="one_ul" style="display:none">
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                </ul>
            </li>
            <li>
                <h2 id="tow">第二个标签选择</h2>
                <ul id="tow_ul" style="display:none">
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                </ul>
            </li>
            <li>
                <h2  id="thr">第三个标签选择</h2>
                <ul  id = thr_ul style="display:none">
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Jquery实现内联下拉菜单效果（一个小test）

猜你喜欢