效果如下：http://campus.51job.com/test/zengxl/js
html:
1 <div class="mainnav"> 2 <div class="navwrap"> 3 <ul class="navul"> 4 <li class="navlist"><a class="nav_a" href="index.html">首页<br/><span>Home</span></a></li> 5 <li class="navlist"><a class="nav_a" href="#dotwrap">奖励说明<br/><span>Award description</span></a></li class="navlist"> 6 <li class="navlist"><a class="nav_a" href="#">人气投票<br/><span>Popular vote</span></a></li> 7 <li class="navlist"><a class="nav_a" href="#">Q&A<br/><span>interlocution</span></a></li> 8 <li class="navlist"> 9 <a class="nav_a" href="#">关于Marvell<br/><span>About Marvell</span></a> 10 <div class="downlist clear"> 11 <ul> 12 <li class="navitem"><a href="#">美满全球</a></li> 13 <li class="navitem lastitem"><a href="#">美满中国</a></li> 14 </ul> 15 </div> 16 </li> 17 </ul> 18 </div> 19 </div>
css：
1 .mainnav{ 2 background: url(../images/mainnavbg.png) repeat-x; 3 height: 73px; 4 width: 100%; 5 position: relative; 6 z-index: 3; 7 } 8 .navwrap .navul{ 9 position: relative; 10 height: 100%; 11 float: left; 12 margin-left: 150px; 13 } 14 .mainnav .navwrap{ 15 width: 933px; 16 margin: 0 auto; 17 height: 73px; 18 } 19 .mainnav li.navlist{ 20 float: left; 21 height: 70px; 22 position: relative; 23 z-index: 2; 24 } 25 .nav_bg{ 26 background: #a24601; 27 } 28 .mainnav a.nav_a{ 29 padding:10px 28px 0; 30 font-size: 17px; 31 color: #000; 32 text-align: center; 33 } 34 .mainnav a span{ 35 font-size: 13px; 36 } 37 .downlist .navitem{ 38 float: left; 39 height: 48px; 40 line-height: 48px; 41 margin: 0 18px; 42 border-bottom: 1px solid #7c3500; 43 padding: 0 18px; 44 } 45 .downlist .lastitem{ 46 border-bottom: none; 47 } 48 .downlist{ 49 position: absolute; 50 top: 70px; 51 left: 0; 52 width: 98.5%; 53 border: 1px solid #472201; 54 background-color: #ff7817; 55 z-index: 1; 56 display: none; 57 } 58 .navitem a{ 59 font-size: 18px; 60 color: #000; 61 } 62 .navitem .dl_hover{ 63 color: #fff; 64 }
js:
1 /** 2 * 动态添加导航下方的滑动条 3 */ 4 var navul = document.getElementsByClassName('navul'); 5 //创建div元素 6 var navBtn = document.createElement('div'); 7 //设置css样式,注意transition:all 8 navBtn.style.cssText = 'position:absolute;0;bottom:3px;left:0;z-index:998;height:5px;background-color:#4486d4;'+ 9 'box-shadow:0 0 3px #fff;transition:all .5s ease;' 10 //把创建的这个div添加到ul中 11 navul[0].appendChild(navBtn); 12 //获取里面的a元素 13 var nav_a = document.getElementsByClassName('nav_a'); 14 var len = nav_a.length; 15 for (var i = 0; i < len; i++) { 16 //currentStyle:IE的选中样式。 getComputedStyle:FF的计算后样式 17 var style = nav_a[i].currentStyle||getComputedStyle(nav_a[i]); 18 //style.paddingLeft得到的值是带有'px'的，所以转换成Number类型 19 var pL = parseInt(style.paddingLeft,10); 20 var pR = parseInt(style.paddingRight,10) 21 //样式初始化 22 navBtn.style.width = (nav_a[0].offsetWidth-pL-pR)+'px'; 23 navBtn.style.left = (nav_a[0].offsetLeft+pL)+'px'; 24 //给当前对象添加事件。 25 nav_a[i].addEventListener('mouseenter',function(){ 26 //this指的是当前的这个对象 27 navBtn.style.width = (this.offsetWidth-pL-pR)+'px'; 28 navBtn.style.left = (this.offsetParent.offsetLeft+pL)+'px'; 29 },false); 30 nav_a[i].addEventListener('mouseleave',function(){ 31 navBtn.style.width = (nav_a[0].offsetWidth-pL-pR)+'px'; 32 navBtn.style.left = (nav_a[0].offsetLeft+pL)+'px'; 33 },false); 34 }