1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .menu{ 8 width: 694px; 9 height: 50px; 10 /*background-color: cyan;*/ 11 list-style: none; /* 去掉无序列表前的小圆点 */ 12 margin: 50px auto 0; /* ul元素本身自带margin */ 13 padding: 0; /* ul元素本身自带padding */ 14 } 15 16 .menu li{ 17 width: 98px; 18 height: 48px; 19 border: 1px solid gold; 20 float: left; 21 margin-left: -1px; 22 } 23 24 .menu li a{ 25 /*background-color: gold;*/ 26 display: block; 27 width: 98px; 28 height: 48px; 29 text-align: center; 30 line-height: 48px; 31 text-decoration: none; 32 color: pink; 33 font-size: 16px; 34 font-family: ‘Microsoft Yahei‘; 35 } 36 37 .menu li a:hover{ 38 background-color: gold; 39 color: #fff; 40 } 41 </style> 42 </head> 43 <body> 44 <!-- ul.menu>(li>a{公司简介})*7 --> 45 <ul class="menu"> 46 <li><a href="#">公司简介</a></li> 47 <li><a href="#">公司简介</a></li> 48 <li><a href="#">公司简介</a></li> 49 <li><a href="#">公司简介</a></li> 50 <li><a href="#">公司简介</a></li> 51 <li><a href="#">公司简介</a></li> 52 <li><a href="#">公司简介</a></li> 53 </ul> 54 </body> 55 </html>
原文：https://www.cnblogs.com/kogmaw/p/12423751.html