Jquery drop-down menu code (jq css)

Create html
<Ul class = "topnav">
<Li> <a href = "#"> home </a> </li>
<Li>
<A href = "#"> about me </a>
<Ul class = "subnav">
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
</Ul>
</Li>
<Li>
<A href = "#"> portfolio </a>
<Ul class = "subnav">
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> blog </a>
<Ul class = "subnav">
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
<Li> <a href = "#"> sub nav link </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> contact me </a> </li>
<Li> <a href = "#"> rss </a> </li>
</Ul>

Step 2. Create a css tutorial

Div. examples_body_wrap {
Width: 750px;
Margin: 50px auto 0 auto;
Clear: both;
}
Div. examples_body_wrap h3 {
Color: # f9f66d;
Font-size: 130%;
Padding-bottom: 15px;
Margin-bottom: 15px;
Background: url (http://sunflowamedia.com/images/solid-line-news.gif) repeat-x bottom;
}
Ul. topnav {
Width: 710px;
Padding: 0 0 200px 0;
Float: left;
Background: #222;
Background: url (../images/topnav_bg.gif) repeat-x;
}
Ul. topnav li {
Float: left;
Margin: 0;
Padding: 0 10px 0 15px;
Position: relative;/* -- declare x and y axis base for sub navigation --*/
Display: inline;
}
Ul. topnav li {
Padding: 10px 5px;
Color: # fff;
Display: block;
Text-decoration: none;
Float: left;
}
Ul. topnav li a: hover {
Background-color: #333;
-Moz-border-radius: 3px;/* -- css3 rounded corners --*/
-Khtml-border-radius: 3px;/* -- css3 rounded corners --*/
-Webkit-border-radius: 3px;/* -- css3 rounded corners --*/
}
Ul. topnav li span {/* -- drop down trigger styles --*/
Width: 17px;
Height: 35px;
Float: left;
Background: url (../images/subnav_btn.gif) no-repeat center top;
}
Ul. topnav li span. subhover {/* -- hover effect for trigger --*/
Background-position: center bottom; cursor: pointer;
}
Ul. topnav li ul. subnav {
Width: 170px;
Position: absolute;/* -- important-keeps tutorial subnav from affecting main navigation flow --*/
Left: 0; top: 35px;
Background: #333;
Margin: 0; padding: 0;
Display: none;
Float: left;
Border: 1px solid #111;
}
Ul. topnav li ul. subnav li {
Width: 170px;
Margin: 0; padding: 0;
Border-top: 1px solid #252525;/* -- create bevel effect --*/
Border-bottom: 1px solid #444;/* -- create bevel effect --*/
Clear: both;
}
Html ul. topnav li ul. subnav li {
Width: 145px;
Float: left;
Background-color: #333;
Padding-left: 20px;
Font-size: 0.9em;
}
Html ul. topnav li ul. subnav li a: hover {/* -- hover effect for subnav links --*/
Background-color: #222;
}

Insert jquery and script packages

$ (Document). ready (function (){

$ ("Ul. subnav "). parent (). append ("<span> </span>"); // only shows drop down trigger when webpage effect is enabled (adds empty span tag after ul. subnav *)

$ ("Ul. topnav li span"). mouseo tutorial ver (function () {// when trigger is clicked...

// Following events are applied to the subnav itself (moving subnav up and down)
$ (This). parent (). find ("ul. subnav"). slidedown ('fast '). show (); // drop down the subnav on click

$ (This). parent (). hover (function (){
}, Function (){
$ (This). parent (). find ("ul. subnav"). slideup ('low'); // when the mouse hovers out of the subnav, move it back up
});

// Following events are applied to the trigger (hover events for the trigger)
}). Hover (function (){
$ (This). addclass ("subhover"); // on hover over, add class "subhover"
}, Function () {// on hover out
$ (This). removeclass ("subhover"); // on hover out, remove class "subhover"
});

});

<Script type = "text/Webpage effects" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>