Super sexy drop-down menu implemented by jquery + CSS

How to Implement
Step 1 html CopyCode The Code is as follows: <ul class = "topmenu">
<Li> <a href = "#"> Home </a> </LI>
<Li> <a href = "#"> tutorials </a>
<Ul class = "submenu1">
<Li> <a href = "#"> latency </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 The Code is 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 pixel PX 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
{
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
{
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 The Code is as follows: <SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
// Top menu
$ ("Ul. submenu1 "). parent (). append ("<span> </span>"); // only shows drop down trigger when JS is 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 ('low'); // when the mouse hovers Out Of The submenu1, move it back up
});
// 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