1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0;padding:0;font-size:14px;} 8 ul{list-style:none;margin-left:5px;} 9 li{float:left;margin-top:20px;} 10 a{text-decoration: none;display: block;width:90px;height:30px;line-height:30px;background-color:#f60;margin-right:5px;text-align: center;color: #000000;} 11 a:hover{color:#fff;background-color:#f60;height:35px;margin-top: -5px;line-height: 35px;} 12 </style> 13 <script type="application/javascript" language="JavaScript"> 14 window.onload=function(){ 15 var aA=document.getElementsByTagName("a"); 16 for(var i=0;i<aA.length;i++) { 17 //对每个标签进行js动画注入 18 aA[i].onmouseover = function () { 19 clearInterval(this.time);//使得动画不重叠 20 var This = this; 21 This.time = setInterval(function () {//js的动画函数，setInterval 22 //offsetWidth当前宽度 23 This.style.width = This.offsetWidth + 8 + "px"; 24 if (This.offsetWidth >= 160) {//当前宽度大于160时，停止增加宽度 25 clearInterval(This.time); 26 } 27 }, 30) 28 }; 29 aA[i].onmouseout = function () { 30 clearInterval(this.time); 31 var This = this; 32 This.time = setInterval(function () { 33 This.style.width = This.offsetWidth - 8 + "px"; 34 if (This.offsetWidth <= 100) {//当前宽度等于原来的宽度时，设置宽度不再减小 35 This.style.width="100px"; 36 clearInterval(This.time); 37 } 38 }, 30) 39 } 40 } 41 } 42 </script> 43 </head> 44 <body> 45 <ul> 46 <li><a href="#">File</a></li> 47 <li><a href="#">Edit</a></li> 48 <li><a href="#">View</a></li> 49 <li><a href="#">Navigate</a></li> 50 </ul> 51 52 </body> 53 </html>
在制作菜单样式的时候要说明的一点是：如果要给水平菜单增加整体背景，则必须要对<li>标签设置宽高，否则<li>浮动后，脱离文档流 ，会导致<ul>失去高度和宽度，如果要给<ul>进行整体北京设置，首先要给<ul>定义宽、高。
原文：http://www.cnblogs.com/Mirac1e/p/5199692.html