css及jQuery实现的精美拉下菜单导航条

 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}