jquery pull-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>

Step2. 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 a {
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 a {
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 the Web 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 (' slow '); When the mouse hovers out of the The Subnav
});

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/web Effects" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script >