纯CSS下拉菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Untitled Document</title> 6 <style> 7 8 #nav ul{ 9 width:700px; 10 height:30px; 11 background-color:gray; 12 list-style-type:none; 13 } 14 15 #nav ul li{ 16 float:left; 17 width:100px; 18 display:inline-block; 19 padding:0; 20 margin:0; 21 background-color:green; 22 border-left: 1px solid rgba(255, 255, 255, 0.098); 23 border-right: 1px solid rgba(0, 0, 0, 0.35); 24 25 } 26 27 #nav ul li a{ 28 line-height:30px; 29 display:block; 30 color:white; 31 text-decoration:none; 32 text-align:center; 33 padding:0 10px; 34 } 35 36 #nav ul li a:hover{ 37 font-weight:bold; 38 background-color:#C00; 39 } 40 41 #nav ul li ul{ 42 background-color:pink; 43 width:130px; 44 height:100%; 45 margin:0; 46 padding:0; 47 border-left: 1px solid rgba(0, 0, 0, 0.35); 48 border-right: 1px solid rgba(255, 255, 255, 0.098); 49 display:none; 50 51 } 52 53 #nav ul li:hover ul{ 54 display:block; 55 } 56 57 #nav li ul li{ 58 background-color:red; 59 width:100%; 60 float:none; 61 } 62 63 #nav li ul a{ 64 line-height:30px; 65 text-align:left; 66 overflow:hidden; 67 } 68 69 </style> 70 71 </head> 72 73 <body> 74 <div id = "nav"> 75 <ul> 76 <li><a href="#">111</a></li> 77 <li><a href="#">12fdsfdf</a> 78 <ul> 79 <li><a href="#">dfdsafasdfas</a></li> 80 <li><a href="#">adfasdfasdfdsa</a></li> 81 <li><a href="#">dfadsfdsfds</a></li> 82 </ul> 83 </li> 84 <li><a href="#">dfadsfasdf</a></li> 85 <li><a href="#">ewrewrew</a></li> 86 </ul> 87 </div> 88 89 </body> 90 </html>
1、a设置line-height和display:block才能使高度和LI一致；
2、li设置过宽度之后，a可以不用再设置；
3、通过设置li的hover来实现下拉菜单的显示与隐藏；（但不确定那些浏览器和版本兼容）
4、用标签选择器时要考虑继承性；
