jquery 下拉菜单

只要你喜欢,无限极联动菜单

<!DOCTYPE html>

<html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style>

        body{background-color:#435a9d;}

        ul,li{margin:0;padding:0;}

        .abc{

            width:124px;

            height:480px;

            margin:100px;

        }

        .abc_ul{

            width:100%;

            height:100%;

        }

        .abc_ul li{

            position:relative;

            list-style:none;

            width:100%;

            height:48px;

            border:1px solid #999;

            line-height:48px;

            text-align:center;

            background-color:#CCC;

            color:#FFF;

            font-size:16px;

            cursor:pointer;

        }

        .abc_ul li ul{

            display:none;

            position:absolute;

            width:100%;

            height:auto;

            left:124px;

            top:0px;

        }

        .abc_ul li ul li{

            width:100%;

            height:36px;

        }

        .addcolor{

            background-color:#666 !important;

        }

     </style>

 </head>

 <script src="../js/jquery.js"></script>

 <script>

 $(document).ready(function(){

    $(".abc_ul li").each(function(index){

        $(this).mouseover(function(){    

            $(this).addClass('addcolor').children('ul').show().parent('li').siblings().children('ul').hide();

            $(this).siblings().removeClass('addcolor')        

        }).mouseout(function(){

            $(this).children().hide();

        })

    })

})    

 </script>

 <body>

    <div class="abc">

        <ul class="abc_ul">

            <li>1

                <ul>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>2

                <ul>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>3

                <ul>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>4

                <ul>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li>5

                <ul>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                    <li>

                        <ul>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

 

你可能感兴趣的:(jquery)