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

核心提示：#navContainer li.first {background-position: 0 0; padding-left: 1px;}#navContainer li.first a {border-left: 0px}#navContainer li a {display: block; padding: 17p

#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等浏览器。