1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 11 } 12 #menu{ 13 background: #27AE60;/*中绿色*/ 14 height: 65px; 15 } 16 #menu ul li{ 17 list-style: none; 18 display: block; 19 float: left; 20 border-right: 1px solid rgba(255,255,255,.3); 21 position: relative; 22 } 23 #menu ul li a{ 24 display: block; 25 padding: 0 35px; 26 line-height: 65px; 27 font-size:21px; 28 color: #FFF; 29 text-decoration: none; 30 } 31 #menu ul li ul{ 32 display: none; 33 position:absolute; 34 top: 65px; 35 background:#2ECC71; 36 37 } 38 #menu ul li:hover ul{ 39 display: block; 40 } 41 #menu ul li ul li{ 42 width: 100%; 43 border-right: 0; 44 border-top:1px solid rgba(255,255,255,.3) ; 45 46 } 47 #menu ul li ul li a{ 48 font-size:18px; 49 line-height: 50px; 50 } 51 #menu ul li:hover{ 52 background: rgba(0,0,0,.2); 53 } 54 </style> 55 </head> 56 <body> 57 <nav id="menu"> 58 <ul> 59 <li ><a href="">Home</a></li> 60 <li ><a href="">News</a> 61 <ul> 62 <li ><a href="">Sports</a></li> 63 <li ><a href="">Weather</a></li> 64 <li ><a href="">Finance</a></li> 65 66 </ul> 67 </li> 68 <li ><a href="">Products</a> 69 <ul> 70 <li ><a href="">Construction</a></li> 71 <li ><a href="">Machinery</a></li> 72 <li ><a href="">Compressor</a></li> 73 <li ><a href="">Vehicle</a></li> 74 </ul> 75 76 </li> 77 78 <li ><a href="">Services</a></li> 79 <li ><a href="">Contatct</a></li> 80 81 </ul> 82 83 </nav> 84 </body> 85 </html>