今天看到一个比较有趣的效果，非常简单，就是子导航的高度不是固定的，当鼠标移上去以后导航的高度会随着子导航的内容改变而发生变化，不多说了，我做了个demo，如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据子导航高度而改变的导航</title> <style> *{margin: 0;padding: 0;list-style: none;text-decoration: none; font-size: 12px;font-family: "yahei"} body{background: url('img/bg.jpg') no-repeat;} #header{height: 74px;} .logo{float: left; width: 150px;height: 74px;margin-left: 20px;} .logo img{width: 100%;height: 74px;} .nav{float: right;margin-right: 20px;} .nav li{float: left; position: relative;} .nav a{display: inline-block; line-height: 74px;padding: 0 12px;color: #999;font-weight: bold;transition:all 0.5s;} .nav a:hover{color: #fff;} .child{width: 140px; position: absolute;left: 0;top: 60px;display: none;} .child a{line-height: 20px;display: inline-block; float: left; width: 100%;height: 20px;} .bg{width: 100%;height: 74px;background: #000; border-bottom: 1px solid #000;opacity: 0.8;z-index: -1;position: absolute;top: 0;left: 0;} </style> <script src="js/jquery-1.7.2.js"></script> <script> $(function(){ $('.nav li').hover(function(){ $(this).children('a').eq(0).css({color:'#fff'}); $('.bg').stop().animate({ height:74+$(this).children('.child').height() }); $(this).children('div').stop(false,true).slideDown(); },function(){ $(this).children('a').eq(0).css({color:'#999'}) $('.bg').stop().animate({ height:74 }); $(this).children('div').stop(false,true).slideUp(); }); }); </script> </head> <body> <div id="header"> <div class="logo"> <a href="#"><img src="img/0.jpg" alt=""></a> </div> <div class="nav"> <ul> <li> <a href="#">男人范着装</a> <div class="child"> <a href="#">男人装 home</a> <a href="#">男人装 selection</a> <a href="#">男人装 uniform</a> <a href="#">男人装 bsg</a> </div> </li> <li> <a href="#">优型工艺</a> <div class="child"> <a href="#">优型五大维度</a> <a href="#">衬衫</a> <a href="#">西服</a> </div> </li> <li> <a href="#">活出男人味</a> <div class="child"> <a href="#">男人范大片</a> <a href="#">男人范杂志</a> </div> </li> <li> <a href="#">男人范俱乐部</a> <div class="child"> <a href="#">vip</a> <a href="#">最新活动</a> <a href="#">问卷调查</a> <a href="#">问卷调查</a> <a href="#">问卷调查</a> </div> </li> <li> <a href="#">招商加盟</a> <div class="child"> <a href="#">加盟支持</a> <a href="#">加盟流程</a> </div> </li> </ul> </div> <div class="bg"></div> </div> </body> </html>