自己写的三级菜单代码

js代码：

        $(function () {
            var y = $(\'.p\').length,r=15,h=50;
            var wa = document.documentElement.clientWidth;
            $(\'body\').css(\'width\', wa - h).css(\'overflow\', \'auto\');
            $(\'#menu li\').css(\'width\', (wa - h) / y - r);


            $(\'#menu li\').mouseover(function () {
                if ($(\'.p\').index(this) == (y - 1)) {
                    $(\'.p div div\').css(\'position\', \'absolute\').css(\'left\', -((wa - h) / y - r) + \'px\').css(\'top\', \'0px\');
                } else {
                    $(\'.p div div\').css(\'position\', \'absolute\').css(\'left\', ((wa - h) / y - r) + \'px\').css(\'top\', \'0px\');
                }
            });

            $(window).resize(function () {
                setR()
            });
        });

        function setR() {
            var wa = document.documentElement.clientWidth;
            $(\'body\').css(\'width\', wa - h).css(\'overflow\', \'auto\');
            $(\'#menu li\').css(\'width\', (wa - h) / y - r);
        }
　　

View Code

css代码：

        #menu{margin:0px;padding:0px;}
        a{ text-decoration:none;}
        .p{float:left; width:150px; background-color:#0072E3; height:40px; list-style:none; border:1px solid #fff; text-align:center;line-height:40px;position:relative;}
        
        .p li{ width:150px; background-color:#0072E3; height:40px; list-style:none; border-bottom:2px solid #0066CC; border-top:1px solid #66B3FF; border-left:1px solid #0066CC; border-right:1px solid #0066CC; text-align:center;line-height:40px;position:relative;display:block;}
         span{color:White;}
        .p div{ visibility:hidden;}
        .p div div{ visibility:hidden;}
        .p ul li{ float:none;}
        ul .p:hover>div{ visibility:visible;}
        ul .p:hover{background-color:#46A3FF;}
        ul .p ul li:hover>div{ visibility:visible;}
        ul .p ul li:hover {background-color:#46A3FF;}
        ul .p ul li>div{ position:absolute;right:-1px; top:0px;}
        #menu div ul{margin:0px;position:absolute;left:-1px;padding:0px;}

View Code

html代码：

<div id="menu">
    <ul>
        <li class="p"><span>第一</span>
        <div>
            <ul>
                <li><a href="#"><span>1-1</span></a></li>
                <li><a href="#"><span>1-2</span></a></li>
                <li><a href="#"><span>1-3</span></a></li>
                <li><a href="#"><span>1-4</span></a></li>
            </ul>
        </div>
            
        </li>
        <li class="p"><span>第二</span>
        
        <div>
            <ul>
                <li><span>2-1</span>
                    <div>
                        <ul>
                            <li><a href="#"><span>2-1-1</span></a></li>
                            <li><a href="#"><span>2-1-2</span></a></li>
                            <li><a href="#"><span>2-1-3</span></a></li>
                            <li><a href="#"><span>2-1-4</span></a></li>
                            <li><a href="#"><span>2-1-5</span></a></li>
                            <li><a href="#"><span>2-1-6</span></a></li>
                            <li><a href="#"><span>2-1-7</span></a></li>
                            <li><a href="#"><span>2-1-8</span></a></li>
                        </ul>
                    </div>
                </li>
                <li><span>2-2</span></li>
                <li><span>2-3</span>
                    <div>
                                    <ul>
                                        <li><a href="#"><span>2-2-1</span></a></li>
                                    </ul>
                                </div>
                </li>
                <li><span>2-4</span></li>
            </ul>
        </div>
        </li>
        <li class="p"><span>第三</span></li>
        <li class="p"><span>第四</span>
            <div>
                        <ul>
                            <li><span>4-1-1</span>
                                <div>
                                    <ul>
                                        <li><a href="#"><span>4-1-1-1</span></a></li>
                                        <li><a href="#"><span>4-1-1-2</span></a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>4-1-1</span></a></li>
                            <li><a href="#"><span>4-1-2</span></a></li>
                            <li><a href="#"><span>4-1-3</span></a></li>
                            <li><a href="#"><span>4-1-4</span></a></li>
                        </ul>
                    </div>
        </li>
        <li class="p"><span>第五</span></li>
        <li class="p"><span>第六</span>
            <div>
                        <ul>
                            <li><span>6-1-1</span>
                                <div>
                                    <ul>
                                        <li><a href="#"><span>6-1-1-1</span></a></li>
                                        <li><a href="#"><span>6-1-1-2</span></a></li>
                                        <li><a href="#"><span>6-1-1-3</span></a></li>
                                        <li><a href="#"><span>6-1-1-4</span></a></li>
                                        <li><a href="#"><span>6-1-1-5</span></a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>6-1-1</span></a></li>
                            <li><a href="#"><span>6-1-2</span></a></li>
                        </ul>
                    </div>
        </li>
    </ul>
    
</div>

View Code