下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
jquery 無限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>腳本之家 www.jb51.net</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;} /*這一級(jí)是導(dǎo)航*/
.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;} /*這是第二級(jí)菜單*/
.menu li ul a { width:110px; }
.menu li ul a:hover { background:gray;}
.menu li ul ul{ top:0;left:150px;} /*從第三級(jí)菜單開始,所有的子級(jí)菜單都相對(duì)偏移*/
</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 無限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試