自己寫的一個菜單(因為是初學 不知道能不能算無限級)

?

jquery

$(document).ready(function(){
????????$("ul?li").hover(function(){
????????????$(this).find("ul:first").show();//鼠標滑過查找li下面的第一個ul然后顯示；
????????},function(){
????????????$(this).find("ul:first").hide();//鼠標離開隱藏li下面d的ul；
????????})
????????$("ul?li?ul?li?ul").prev().addClass("bbb");//給li下面ul是aaa的樣式的前一個同輩元素添加css；
????})

?

css

ul,?li{padding:0;margin:0;}
ul?li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;}
ul?li?ul?li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul?li?ul{display:none;}
ul?a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px}
ul?li?a:hover{background:#eee;color:#000}
ul?li?ul?li?.aaa{position:absolute;left:80px;top:0;border-left:1px?solid?#fff}
ul?li?ul?li?.aaa?li{float:none;}
body?.bbb{background:#f00;color:#fff}

?

?

html

<ul>
???<li>
??????<a?href="">欄目一</a>
??????<ul>
?????????<li><a?href="">菜單一</a></li>
?????????<li><a?href="">菜單一</a></li>
?????????<li><a?href="">菜單一</a></li>
?????????<li><a?href="">菜單一</a>
?????????????<ul?class="aaa">
????????????????<li><a?href="">菜單三</a></li>
????????????????<li><a?href="">菜單三</a>
????????????????????<ul?class="aaa">
????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????<li><a?href="">菜單三</a>
????????????????????????????<ul?class="aaa">
????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????<li><a?href="">菜單三</a>
????????????????????????????????????<ul?class="aaa">
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
?????????????????????????????????????</ul>
????????????????????????????????</li>
????????????????????????????????<li><a?href="">菜單三</a></li>
?????????????????????????????</ul>
????????????????????????</li>
????????????????????????<li><a?href="">菜單三</a></li>
?????????????????????</ul>
????????????????</li>
????????????????<li><a?href="">菜單三</a></li>
????????????????<li><a?href="">菜單三</a></li>
?????????????</ul>
?????????</li>
??????</ul>
???</li>
???<li>
??????<a?href="">欄目二</a>
???</li>
???<li>
??????<a?href="">欄目三</a>
???????<ul>
?????????<li><a?href="">菜單三</a>
?????????</li>
?????????<li><a?href="">菜單三</a>
?????????????<ul?class="aaa">
????????????????<li><a?href="">菜單三</a></li>
????????????????<li><a?href="">菜單三</a>
????????????????????<ul?class="aaa">
????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????<li><a?href="">菜單三</a>
????????????????????????????????????<ul?class="aaa">
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a></li>
?????????????????????????????????????</ul>
????????????????????????????????</li>
????????????????????????????????<li><a?href="">菜單三</a>
????????????????????????????????????<ul?class="aaa">
????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????<li><a?href="">菜單三</a>
????????????????????????????????????????????<ul?class="aaa">
????????????????????????????????????????????????<li><a?href="">菜單三</a></li>
????????????????????????????????????????????????<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>
?????????????????????????????</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>
???<li>
??????<a?href="">欄目四</a>
???</li>
</ul>

?

?

?

因為是初學者，希望筒子們狠拍！！！

?

?

轉載于:https://www.cnblogs.com/iloong/archive/2010/05/19/1739647.html

總結

以上是生活随笔為你收集整理的jquery下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。