1.纵向
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>menu01</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 a{ 12 text-decoration: none; 13 display: block; 14 } 15 ul{ 16 list-style:none; 17 } 18 .menu{ 19 width: 600px; 20 margin: 300px auto; 21 } 22 ul li a{ 23 width: 120px; 24 height: 30px; 25 line-height: 30px; 26 text-align:center; 27 /*padding-left: 20px;*/ 28 /*text-indent: 20px;*/ 29 background: pink; 30 color:#fff; 31 margin-bottom: 5px; 32 } 33 a:hover{ 34 background: #EE7A23; 35 } 36 </style> 37 38 </head> 39 <body> 40 <div class="menu"> 41 <ul> 42 <li><a href="javascript:;">首页</a></li> 43 <li><a href="javascript:;">行业解决方案</a></li> 44 <li><a href="javascript:;">资讯</a></li> 45 <li><a href="javascript:;">招聘</a></li> 46 <li><a href="javascript:;">服务</a></li> 47 </ul> 48 </div> 49 </body> 50 </html>
实现效果：
注意：
解决方案：
2.横向（注意：把<a>标签设置为：display: block;）
实现效果：
3.圆角
实现效果：
4.向上增加高度
效果图：
5.水平增加宽度（JS）
1 <script type="text/javascript"> 2 window.onload=function(){ 3 var a_num = document.getElementsByTagName("a"); 4 for(let i=0;i<a_num.length;i++){ 5 a_num[i].onmouseover=function(){ 6 clearInterval(this.time); 7 var $this = this; 8 $this.time = setInterval(function(){ 9 $this.style.width = $this.offsetWidth+8+"px"; 10 if($this.offsetWidth>=120){ 11 clearInterval($this.time); 12 } 13 },30) 14 } 15 16 a_num[i].onmouseout=function(){ 17 clearInterval(this.time); 18 var $this = this; 19 $this.time = setInterval(function(){ 20 $this.style.width = $this.offsetWidth-8+"px"; 21 if($this.offsetWidth<=120){ 22 $this.style.width = "120px"; 23 clearInterval($this.time); 24 } 25 },30) 26 } 27 28 } 29 } 30 31 32 </script>
6.水平增加宽度（JQ）
1 <script type="text/javascript"> 2 $ (function(){ 3 $("a").hover( 4 function(){ 5 $(this).stop().animate({"width":"160px"},200); 6 }, 7 function(){ 8 $(this).stop().animate({"width":"120px"},200); 9 } 10 ) 11 }) 12 </script>