首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

无限层级上拉菜单(jquery)

2012-11-23 
无限层级下拉菜单(jquery)[colorred]呵呵,先发1个以前工作中自己写的一个东东:[/color]HTML:ul iddaoh

无限层级下拉菜单(jquery)
[color=red]呵呵,先发1个以前工作中自己写的一个东东:[/color]

HTML:            <ul id="daohang">
                <li>
                    <a href="${base}/">首页</a>
                        <ul>
                            <li>
                                <a href="#">下拉一</a>
                                <ul class="aaa">
                                    <li>
                                        <a href="#">下拉二</a>
                                        <ul class="aaa">
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                            <li><a href="#">下拉二</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">下拉二</a></li>
                                    <li><a href="#">下拉二</a></li>
                                </ul>
                            </li>
                            <li><a href="#">下拉二</a></li>
                            <li><a href="#">下拉三</a></li>
                        </ul>
                </li>
            </ul>

css:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}

js(基于jquery):
$(document).ready(function(){
         $("#daohang li").hover(function(){
            $(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
        },function(){
            $(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
        });

热点排行