jquery 無限極下拉菜單的簡單實例(精簡濃縮版)
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>武林網 m.survivalescaperooms.com</title><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){ $(".menu li").hover(function(){ $(this).children("ul").show(); //mouseover },function(){ $(this).children("ul").hide(); //mouseout });});</script><style type="text/css">ul{ list-style:none; margin:0; padding:0;}.menu { height:30px; line-height:30px; }.menu li { float:left; position:relative;} /*這一級是導航*/.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }.menu li a:hover { color:#000; background:#EFEFEF; }.menu li a.more { color:red; }.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*這是第二級菜單*/.menu li ul a { width:110px; }.menu li ul a:hover { background:gray;}.menu li ul ul{ top:0;left:150px;} /*從第三級菜單開始,所有的子級菜單都相對偏移*/</style></head><body><ul class="menu"><li><a href="#">菜單一</a><ul class="one"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#" class="more">菜單五</a><ul class="two"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#" class="more">菜單五</a><ul class="three"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#" class="more">菜單五</a><ul class="four"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#" class="more">菜單五</a><ul class="four"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#">菜單五</a></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#">菜單二</a><ul class="one"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#" class="more">菜單三</a><ul class="two"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#" class="more">菜單三</a><ul class="three"><li><a href="#">菜單一</a></li><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></ul></li><li><a href="#">菜單三</a></li><li><a href="#">菜單四</a></li><li><a href="#">菜單五</a><ul class="one"><li><a href="#">菜單一</a></li><li><a href="#">菜單二</a></li><li><a href="#">菜單三</a></li></ul></li></ul></body></html>以上這篇jquery 無限極下拉菜單的簡單實例(精簡濃縮版)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
