jquery 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)
更新時(shí)間:2016年05月31日 08:51:50 投稿:jingxian
下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
jquery 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>腳本之家 www.dbjr.com.cn</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;} /*這一級是導(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;} /*這是第二級菜單*/ .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 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選,怎么才能讓他變成單選,效果跟radio一樣呢,本菜鳥就自己寫了個(gè)小程序,代碼很簡單2014-06-06關(guān)于jquery中全局函數(shù)each使用介紹
jquery 包含了兩個(gè) each 一個(gè)是 $().each 另一個(gè)是 $.each 區(qū)別就在于前一個(gè)是 jquery對象的內(nèi)置函數(shù) 而后一個(gè) 這是對象的遍歷函數(shù)2013-12-12jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析,需要的朋友可以參考下2014-11-11Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁前觸發(fā)事件 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04