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>
更多专业前端知识，请上 【猿2048】www.mk2048.com
