用css及jQuery实现的精美拉上菜单导航条
用css及jQuery实现的下拉精美菜单导航，
源代码下载地址：http://download.csdn.net/my
html代码：
<div class="wrapper">
<div id="navContainer">
<ul class="clear" id="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Freebies</a>
<div class="dropDown">
<div class="top"></div>
<div class="items">
<ul>
<li class="first"><a href="#">Brushes</a></li>
<li><a href="#">Textures</a></li>
<li><a href="#">Icon Sets</a></li>
<li><a href="#">Patterns</a></li>
<li class="last"><a href="#">Vectors</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Showcase</a>
<div class="dropDown">
<div class="top"></div>
<div class="items">
<ul>
<li class="first"><a href="#">Brushes</a></li>
<li><a href="#">Textures</a></li>
<li><a href="#">Icon Sets</a></li>
<li><a href="#">Patterns</a></li>
<li class="last"><a href="#">Vectors</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Our Blog</a></li>
<li><a href="#">About Us</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
</div>
css代码：
style type="text/css">
*{ margin:0; padding:0;}
body{ font:12px "Helvetiva Neue", Helvetica, Arial, sans serif; background:url(images//body-background.jpg) repeat;}
img{ border:0;}
a img{ border:0;}
a, a:link, a:visited { text-decoration:underline;}
a:hover, a:active {text-decoration: none;}
.wrapper{ width:900px; margin:30px auto;}
.clear:after{content:""; display:block; height:0; clear:both; visibility:hidden;}
.clear{ display:inline-block;}
*html .clear{ height:1%;}
#navContainer ul{ padding:0;}
#navContainer li{ float:left; list-style:none; background:url(images/nav-sprite.png) no-repeat 0 0; padding:1px 0 2px; position:relative; zoom:1;}
#navContainer li {background-position: -10px 0px; }
#navContainer li.last {background-position: top right; padding-right: 1px;}
#navContainer li.last a {border-right: 0px}
#navContainer li.first {background-position: 0 0; padding-left: 1px;}
#navContainer li.first a {border-left: 0px}
#navContainer li a {display: block; padding: 17px 21px 16px; text-decoration: none; font-size: 12px; color: #555; text-shadow: 2px 2px 1px #fff; -moz-text-shadow: 2px 2px 1px #fff; -webkit-text-shadow: 2px 2px 1px #fff; -o-text-shadow: 2px 2px 1px #fff; letter-spacing:
1px; border-right: 1px solid #dbdbdb; border-left: 1px solid #fbfbfb;}
#navContainer li a:hover, #navContainer li.active a {background: url(images/hov-bg.png) repeat;}
#navContainer .dropDown{ position:absolute; left:-1px; top:50px; border:1px solid #e0e0e0; border-top:none; background:#f9f9f9; padding-bottom:5px; display:none; border-bottom-left-radius:4px; border-bottom-right-radius:4px;}
#navContainer .dropDown ul { padding: 0px;}
#navContainer .dropDown li{ background:none; border:0px; width:150px; float:none; padding:0px;}
#navContainer .dropDown li a{ background:none; border:0px; margin:0 20px; padding:15px 0; border-bottom:1px solid #e3e3e3; width:110px; border-top:1px solid #fff;}
#navContainer .dropDown li a:hover { color: #a1a1a1;}
#navContainer .dropDown li.first a { border-top: 0px;}
#navContainer .dropDown li.last a { border-bottom: 0px;}
</style>
jQuery代码：
<script type="text/javascript">
$(document).ready(function(){
$('#nav li').hover(function(){
$(this).find('.dropDown').slideToggle(200);
$(this).toggleClass('active');
})
})
</script>
预览效果：支持firefox,chrome,ie等浏览器。