jquery下拉菜单代码（jq css)

创建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. 创建css教程
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教程 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;
}

插入jquery和脚本包
$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //only shows drop down trigger when 网页特效 is enabled (adds empty span tag after ul.subnav*)

$("ul.topnav li span").mouseo教程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 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/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>