代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用ul和li来完成菜单</title>
<style>
.menu{
width: 693px;
height: 50px;
background-color: cyan;
/*list-style:none去掉小圆点*/
list-style: none;
margin: 50px auto 0;
padding: 0;
}
.menu li{
width: 98px;
height:50px;
/*display: inline-block;*/
float: left;
border: 1px solid gold;
background-color: #fff;
font-size:16px;
margin-left: -1px;
}
.menu li a{
/*background-color: gold; */
display: block;
width: 98px;
height: 50px;
text-align: center;
line-height: 50px;
color: pink;
text-decoration: none;
font-size:20px;
font-family: ‘microsoft yahei‘;
}
.menu li a:hover{
background-color: skyblue;
color: #fff;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">维修服务</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">软件下载</a></li>
<li><a href="#">价格查询</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">客户反馈</a></li>
</ul>
</body>
</html>
执行效果图
原文：https://www.cnblogs.com/zijiang-4476/p/12158302.html