<ul> <li class="nav01"><a class="news" href="/news/" mce_href="news/">最新信息</a></li> <li class="nav02"><a class="product" href="/products/" mce_href="products/">产品信息</a> <ul class="sub-nav clearfix" > <li><a href="/products/" mce_href="products/">系列产品</a></li> <li><a href="/products/faq.php" mce_href="products/faq.php">常见问题</a></li> <li><a href="/products/download.php" mce_href="products/download.php">下载中心</a></li> <li class="last"><a href="/products/search.php" mce_href="products/search.php">店铺查询</a> <span class="subBottom"></span></li> </ul> </li> <li class="nav03"><a class="service" href="#" mce_href="#">会员中心</a></li> <li class="nav04"><a class="job" href="#" mce_href="#">招贤纳士</a></li> <li class="nav05"><a class="contact" href="#" mce_href="#">联系我们</a> <ul class="sub-nav clearfix" > <li><a href="#" mce_href="#">邮件查询</a></li> <li><a href="#" mce_href="#">留言板</a></li> <li class="last"><a href="#" mce_href="#">地图查询</a> <span class="subBottom"></span></li> </ul> </li> </ul> #header #nav li .sub-nav {position:relative;left:-12px;width:83px;padding-bottom:5px; background:url(/images/subnav_bottom.gif) no-repeat left bottom;} #header #nav li .sub-nav li {line-height:20px;padding:2px 16px 0 16px;width:48px; border-left:1px solid #C1C1C1;border-right:1px solid #C1C1C1;text-indent:0;} #header #nav li .sub-nav .last {position:relative;padding-bottom:7px;} #header #nav li .sub-nav .last span {display:block;position:absolute;left:0;top:2px; width:84px;height:7px;} #header #nav li .sub-nav li a {display:inline;line-height:20px;color:#636363;text-indent:0; background:transparent none repeat scroll 0 0;} #header #nav li .nav02 a {background-position:-117px 0;} #header #nav li .nav03 a {background-position:-117px 0;} $(function(){ $("ul.sub-nav").css("display","none"); $("#nav li").hover(function(){ $(this).find("ul.sub-nav").slideDown(); $("ul.sub-nav").stop(true,true); },function(){ $(this).find("ul.sub-nav").slideUp(); }) })