1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>test</title> 5 <meta charset="utf-8"> 6 <style> 7 *{ 8 margin:0 auto; 9 padding:0; 10 border:0; 11 } 12 nav{ 13 width:960px; 14 height:48px; 15 border:1px solid red; 16 } 17 ul li{ 18 list-style:none; 19 float:left; /*可控制子导航栏和右边导航栏不再同一行*/ 20 } 21 ul li:hover{ 22 background-color:yellow;} 23 24 nav ul li a{ 25 font-size:14px; 26 font-weight:800; 27 color:red; 28 float:left; 29 text-decoration:none; 30 line-height:48px; 31 width:100px; 32 border:1px solid green; 33 text-align:center; 34 } 35 nav ul li a:hover{} 36 nav ul li ul li{ 37 clear:both; 38 display:block; 39 } 40 nav ul li ul li a{ 41 text-align:center; 42 } 43 nav ul li ul{ 44 display:none; 45 } 46 nav ul li:hover ul{ 47 display:block; 48 } 49 50 </style> 51 </head> 52 <body> 53 <nav> 54 <ul> 55 <li><a href="">首页</a> 56 <ul class="aa"> 57 <li><a href="">aaaa</a></li> 58 <li><a href="">bbb</a></li> 59 <li><a href="">ccc</a></li> 60 <li><a href="">ddd</a></li> 61 </ul> 62 </li> 63 <li><a href="">学校简介</a> 64 <ul class="aa"> 65 <li><a href="">aaaa</a></li> 66 <li><a href="">bbb</a></li> 67 <li><a href="">ccc</a></li> 68 <li><a href="">ddd</a></li> 69 </ul> 70 </li> 71 <li><a href="">首页</a></li> 72 73 </ul> 74 </nav> 75 76 </body> 77 </html>