这节中为什么/*ul li{float:left;}*/这样写可以变宽复原？而这样在nav li a{ float:left;}里来写，能变宽可没法复原变回原来高度？为什么？求解原理？
*{padding:0; margin:0;}
a{text-decoration:none; }
ul{list-style:none; height:30px;
padding-left:30px;
border-bottom:4px solid #E4393C;
margin-top:20px;}
/*ul li{float:left;}*/
.nav li a{display:block;
width:120px; height:30px;
line-height:30px;
text-align:center;
background-color:#ccc;
margin-left:1px;
float:left;
}
.nav .on,.nav a:hover{color:#fff; background-color:#f60; height:30px; line-height:30px; }
</style>
window.onload=function(){
var a1 =document.getElementsByTagName("a");
for(var i=0; i<a1.length; i++){
a1[i].onmouseover=function(){
clearInterval(this.timer);
var that=this;
that.timer=setInterval(function(){
that.style.width=that.offsetWidth+8+"px";
if(that.offsetWidth>=160){
clearInterval(that.timer);
}
},50)
}
a1[i].onmouseout=function(){
clearInterval(this.timer);
var that=this;
that.timer=function(){
that.style.width=that.offsetWidth-8+"px";
if(that.offsetWidth<=120){
clearInterval(that.timer);
}
}
}
}
}
