running result:
Source:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜单</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 border: none; 11 } 12 13 .container{ 14 width: 288px; 15 background-color: #FCFCFC; 16 border-top: 1px solid orangered; 17 } 18 19 ul{ 20 height: 40px; 21 line-height: 40px; 22 } 23 24 ul li{ 25 list-style: none; 26 padding: 0 8px; 27 float: left; 28 } 29 30 ul li:hover{ 31 background-color: #EDEEF0; 32 } 33 34 ul li a{ 35 color: #7B91B6; 36 text-decoration: none; 37 } 38 39 ul li a:hover{ 40 color: #FF8400; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="container"> 46 <ul> 47 <li><a href="#">设为首页</a></li> 48 <li><a href="#">移动客户端</a></li> 49 <li><a href="#">你好</a></li> 50 <li><a href="#">Pad版</a></li> 51 </ul> 52 </div> 53 </body> 54 </html>