JQUERY+CSS implementation of the sexy Drop-down menu _jquery

How to Achieve
Step 1 HTML

Copy Code code as follows:

<ul class= "Topmenu" >
<li><a href= "#" >Home</a></li>
<li><a href= "#" >Tutorials</a>
<ul class= "Submenu1" >
<li><a href= "#" >Ch1</a></li>
<li><a href= "#" >Ch2</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch21</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch211</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch2111</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch21111</a></li>
<li><a href= "#" >Ch21112</a></li>
<li><a href= "#" >Ch21113</a></li>
<li><a href= "#" >Ch21114</a></li>
<li><a href= "#" >Ch21115</a></li>
<li><a href= "#" >Ch21116</a></li>
</ul>
</li>
<li><a href= "#" >Ch2112</a></li>
<li><a href= "#" >Ch2113</a></li>
<li><a href= "#" >Ch2114</a></li>
<li><a href= "#" >Ch2115</a></li>
</ul>
</li>
<li><a href= "#" >Ch212</a></li>
<li><a href= "#" >Ch213</a></li>
<li><a href= "#" >Ch214</a></li>
</ul>
</li>
<li><a href= "#" >Ch22</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch221</a></li>
<li><a href= "#" >Ch222</a></li>
<li><a href= "#" >Ch223</a></li>
</ul>
</li>
<li><a href= "#" >Ch23</a></li>
</ul>
</li>
<li><a href= "#" >Ch3</a>
<ul class= "Submenu11" >
<li><a href= "#" >Ch31</a></li>
<li><a href= "#" >Ch32</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >Resources</a>
<ul class= "Submenu1" >
<li><a href= "#" >sub Nav link</a></li>
<li><a href= "#" >sub Nav link</a></li>
</ul>
</li>
<li><a href= "#" >about us</a></li>
<li><a href= "#" >Advertise</a></li>
<li><a href= "#" >Submit</a></li>
<li><a href= "#" >contact us</a></li>
</ul>

Step 2 CSS

Copy Code code as follows:

<style type= "Text/css" >
/* Header * *
Body
{
margin:0;
padding:0;
font:10px normal Arial, Helvetica, Sans-serif;
Background: #ddd URL (images/sexydropdownmenu/body_bg.gif) repeat-x;
}
. container
{
width:960px;
margin:0 Auto;
position:relative;
}
#header
{
Background:url (images/sexydropdownmenu/header_bg.gif) no-repeat Center top;
padding-top:120px;
}
#header. Version
{
Color: #111;
font-size:40px;
padding:38px 450px 7px 0;
Text-align:right;
Display:block;
Position:absolute;
top:0;
right:0;
}
#header. Disclaimer
{
Color: #999;
padding:100px 0 7px 0;
Text-align:right;
Display:block;
Position:absolute;
top:0;
right:0;
}
#header. Disclaimer A
{
Color: #ccc;
}
/* Sexy Drop down Menu */
Ul.topmenu
{
List-style:none;
Padding:0 20px;
margin:0;
Float:left;
width:920px;
Background: #222;
Font-size:1.2em;
Background:url (images/sexydropdownmenu/topnav_bg.gif) repeat-x;
}
Ul.topmenu Li
{
Float:left;
margin:0;
padding:0 15px 0 0;
position:relative; /*--declare X and Y axis base for sub navigation--*/
}
Ul.topmenu Li A, ul.topmenu Li A.hover
{
padding:10px 5px;
Color: #fff;
Display:block;
Text-decoration:none;
Float:left;
}
Ul.topmenu Li A.hover, ul.topmenu Li A:hover
{
Background:url (images/sexydropdownmenu/topnav_hover.gif) no-repeat Center top;
}
Ul.topmenu Li Span
{
/*--drop down Trigger styles--*/
width:17px;
height:35px;
Float:left;
Background:url (images/sexydropdownmenu/subnav_btn.gif) no-repeat Center top;
}
Ul.topmenu Li Span.hover
{
Background-position:center Bottom;
Cursor:pointer;
}
Ul.topmenu Li Ul.submenu1
{
/*--hover effect for trigger--*/
List-style:none;
Position:absolute; /*--important-keeps submenu1 from affecting main navigation flow--*/
left:0;
top:35px;
Background: #333;
margin:0;
padding:0;
Display:none;
Float:left;
width:170px;
border:1px solid #111;
}
Ul.topmenu Li Ul.submenu1 li
{
margin:0;
padding:0;
border-top:1px solid #252525; /*--create Bevel effect--*/
border-bottom:1px solid #444; /*--create Bevel effect--*/
Clear:both;
width:170px;
}
Ul.topmenu Li Ul.submenu1 li a
{
Float:left;
width:145px;
Background: #333 URL (images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px Center;
padding-left:20px;
}
Ul.topmenu Li ul.submenu1 li a:hover
{
/*--hover effect for submenu1 links--*/
Background: #222 URL (images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px Center;
}
Ul.topmenu Li ul.submenu1 li ul.submenu11
{
List-style:none;
Position:absolute; /*--important-keeps submenu11 from affecting main navigation flow--*/
left:170px;
Top: -2px;
Background: #333;
margin:0;
padding:0;
Display:none;
Float:left;
width:170px;
border:1px solid #111;
}
</style>

Step 3 JQuery

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
Top Menu
$ ("ul.submenu1"). Parent (). Append ("<span></span>"); Only shows drop down trigger when JS are enabled (Adds empty span tag after ul.submenu1*)
$ ("Ul.topmenu Li span"). Click (function () {//when trigger is clicked ...
Following events are applied to the SUBMENU1 itself (moving-submenu1 up and down)
$ (this). Parent (). Find ("ul.submenu1"). Slidedown (' fast '). Show (); Drop down the submenu1 on click
$ (this). Parent (). Hover (function () {
}, function () {
$ (this). Parent (). Find ("ul.submenu1"). Slideup (' slow '); When the mouse hovers out of the The SUBMENU1
});
Following events are applied to the trigger (Hover events for the trigger)
}). Hover (function () {
$ (this). addclass ("hover"); On hover over, add Class "hover"
}, Function () {//on Hover out
$ (this). Removeclass ("hover"); On hover out, remove class "hover"
});

$ ("Ul.topmenu Li ul.submenu1 li"). Hover (function () {
$ (this). Find ("Ul.submenu11:first"). Show ("slow");
}, function () {
$ (this). Find ("Ul.submenu11:first"). Hide ("fast");
});
});
</script>

Demo Code
Http://www.jb51.net/jiaoben/23955.html