jquery Multilevel pull-down Menu core code _jquery

jquery

Copy Code code as follows:

$ (document). Ready (function () {
$ ("ul Li"). Hover (function () {
$ (this). Finding ("Ul:first"). Show ()//mouse over find the first UL below Li and then display;
},function () {
$ (this). Find ("Ul:first"). Hide ();//mouse left hide Li under D ul;
})
$ ("UL Li ul li ul"). Prev (). addclass ("BBB");//Add CSS to the previous sibling element of the UL AAA style below Li;
})

CSS

Copy Code code 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 code as follows:

<ul>
<li>
<a href= "" > Column one </a>
<ul>
<li><a href= "" > Menu one </a></li>
<li><a href= "" > Menu one </a></li>
<li><a href= "" > Menu one </a></li>
<li><a href= "" > Menu one </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href= "" > section two </a>
</li>
<li>
<a href= "" > Column III </a>
<ul>
<li><a href= "" > Menu three </a>
</li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a>
<ul class= "AAA" >
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li><a href= "" > Menu three </a></li>
<li><a href= "" > Menu three </a></li>
</ul>
</li>
<li>
<a href= "" > section four </a>
</li>
</ul>