1.纵向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>menu01</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
display: block;
}
ul{
list-style:none;
}
.menu{
width: 600px;
margin: 300px auto;
}
ul li a{
width: 120px;
height: 30px;
line-height: 30px;
text-align:center;
/*padding-left: 20px;*/
/*text-indent: 20px;*/
background: pink;
color:#fff;
margin-bottom: 5px;
}
a:hover{
background: #EE7A23;
}
</style> </head>
<body>
<div class="menu">
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">行业解决方案</a></li>
<li><a href="javascript:;">资讯</a></li>
<li><a href="javascript:;">招聘</a></li>
<li><a href="javascript:;">服务</a></li>
</ul>
</div>
</body>
</html>
实现效果：
注意：
解决方案：
2.横向（注意：把<a>标签设置为：display: block;）
实现效果：
3.圆角
实现效果：
4.向上增加高度
效果图：
5.水平增加宽度（JS）
<script type="text/javascript">
window.onload=function(){
var a_num = document.getElementsByTagName("a");
for(let i=0;i<a_num.length;i++){
a_num[i].onmouseover=function(){
clearInterval(this.time);
var $this = this;
$this.time = setInterval(function(){
$this.style.width = $this.offsetWidth+8+"px";
if($this.offsetWidth>=120){
clearInterval($this.time);
}
},30)
} a_num[i].onmouseout=function(){
clearInterval(this.time);
var $this = this;
$this.time = setInterval(function(){
$this.style.width = $this.offsetWidth-8+"px";
if($this.offsetWidth<=120){
$this.style.width = "120px";
clearInterval($this.time);
}
},30)
} }
} </script>
6.水平增加宽度（JQ）
<script type="text/javascript">
$ (function(){
$("a").hover(
function(){
$(this).stop().animate({"width":"160px"},200);
},
function(){
$(this).stop().animate({"width":"120px"},200);
}
)
})
</script>