jquery-navigation drop-down menu-practical and simple

1 /*CSS Codes*/2 /* Navigation*/3. Nav{background:url (".. /img/menu_bar.gif ") repeat-x;}4. Nav ul li{display:inline-block; height:40px; line-height:40px; margin-left:20px;}5. Nav ul Li a{font-size:15pt; font-weight:bold; text-decoration:none; color: #fff; letter-spacing:5px; display:block; p adding:018px;}6. Nav ul Li A:hover{background:url (".. /img/submenu_bg.gif ") repeat;}7 /*Two-tier navigation*/8. Nav. nav_2 {display:none; position:absolute; margin:0; padding:0; Background:url (".. /img/submenu_bg.gif ") repeat;}9 . Nav. Curreves{display:block;}Ten. Nav. nav_2 li{margin-left:0; white-space:nowrap; display:block; width:136px;} One. Nav. nav_2 Li a{font-size:12pt;} A . Nav. nav_2 li A:hover{color: #ffff00;} -  - /*jQuery Codes*/ the$ (document). Ready (function(){ -$ (". Nav>ul>li"). Hover (function(){ -         /*find () searches for all elements that match the specified expression. This function is a good way to find out the descendant elements of the element being processed. */ -         /*Slidedown () drop-down sex. Prev () neighbor element. CSS style*/ +         /*slideup () Upper tensile resistance*/ -$( This). Find ("ul"). Slidedown (). Prev ("a"). css ({background: "URL (img/submenu_bg.gif)")}); +},function(){ A$( This). Find ("ul"). Slideup (). Prev ("a"). css ({background: "None"}) at     }) - }) -  - /*HTML Codes*/ -  -<div class= "NAV" > in<ul> -<li><a href= "#" > Homepage </a> to<ul class= "Nav_2" > +<li><a href= "#" > Media </a></li> -<li><a href= "#" > Market Spotlight </a></li> the</ul> *</li> $<li><a href= "#" > Property Search </a>Panax Notoginseng<ul class= "Nav_2" > -<li><a href= "#" > Map Quick Cash </a></li> the<li><a href= "#" > Second-hand property </a></li> +<li><a href= "#" > Real-Business </a></li> A</ul> the</li> +<li><a href= "#" > About Us </a> -<ul class= "Nav_2" > $<li><a href= "#" > Sales Elite </a></li> $<li><a href= "#" > Annual champions </a></li> -<li><a href= "#" > Line Drop </a></li> -<li><a href= "#" > Premium customer </a></li> the</ul> -</li>Wuyi<li><a href= "#" > Transaction Records </a> the<ul class= "Nav_2" > -<li><a href= "#" > Fill in the Hall </a></li> Wu<li><a href= "#" > Price Walk </a></li> -</ul> About</li> $  -<li><a href= "#" > Property Mortgage </a> -<ul class= "Nav_2" > -<li><a href= "#" > Mortgage Calculations </a></li> A<li><a href= "#" > Bank estimate </a></li> +<li><a href= "#" > Bank interest rate </a></li> the</ul> -</li> $<li><a href= "#" > Welcome Inquiry </a> the<ul class= "Nav_2" > the<li><a href= "#" > Contact Us </a></li> the<li><a href= "#" > Join us </a></li> the</ul> -</li> in</ul> the</div>

jquery-navigation drop-down menu-practical and simple