search

Home  >  Article  >  Web Front-end  >  jquery multi-level drop-down menu core code_jquery

jquery multi-level drop-down menu core code_jquery

WBOY
WBOYOriginal
2016-05-16 18:26:43949browse
jquery
Copy code The code is as follows:

$(document). ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//Mouse over to find The first ul under li is then displayed;
},function(){
$(this).find("ul:first").hide();//The mouse leaves the ul that hides d under li ;
})
$("ul li ul li ul").prev().addClass("bbb");//Add css to the previous sibling element where ul below li is aaa style;
})

css
Copy code The code is as follows:

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
Copy code The code is as follows:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Mootools image display plug-in (lightbox, ImageMenu) collection_MootoolsNext article：Mootools image display plug-in (lightbox, ImageMenu) collection_Mootools

Related articles

See more