沒有使用JavaScript控制二級菜單的顯示，結果如上圖所示。
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>純DIV+CSS制作二級橫向彈出菜單</title> 6 <style type="text/css"> 7 .menu{ 8 font-family:arial,sans-serif; 9 /*width:750px;這里的寬度設置並不是必須的*/ 10 padding:0; 11 margin:50px; 12 } 13 .menu ul{ 14 padding:0; 15 margin:0; 16 /*ul和ol、li都有list-style-type屬性，*/ 17 list-style-type:none; 18 } 19 .menu ul li{ 20 /*float屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框。如果浮動非替換元素，則要 21 指明一個明確的寬度，否則會被盡可能的壓縮。*/ 22 float:left; 23 position:relative; 24 list-style-type:none; 25 } 26 .menu ul li a, .menu ul li a:visited{ 27 /*display的值，none表示不被顯示；block表示顯示為塊級元素，元素前后 28 有換行符；inline為默認值，內聯元素，前后沒有換行符……*/ 29 display:block; 30 text-align:center; 31 text-decoration:none; 32 width:104px; 33 height:30px; 34 color:#000; 35 border-width:1px solid #fff; 36 background:#c9c9a7; 37 line-height:30px; 38 font-size:11px; 39 } 40 /*鼠標無動作時不顯示*/ 41 .menu ul li ul{ 42 display:none; 43 } 44 /*當鼠標指向第一級li時，第二級ul的動作*/ 45 .menu ul li:hover ul{ 46 display:block; 47 position:absolute; 48 top:30px; 49 left:0; 50 width:105px; 51 } 52 .menu ul li:hover ul li a{ 53 display:block; 54 background:#faeec7; 55 color:#000; 56 } 57 .menu ul li:hover ul li a:hover{ 58 background:#dfc184; 59 color:#000; 60 } 61 /*clear屬性定義了元素的哪邊上不允許出現浮動元素。*/ 62 .clear{ 63 clear:both; 64 } 65 </style> 66 67 </head> 68 <body> 69 <div class="menu"> 70 <ul> 71 <li><a class="hide" href="#">一級菜單</a> 72 <ul> 73 <li><a href="#">二級菜單</a></li> 74 <li><a href="#">二級菜單</a></li> 75 <li><a href="#">二級菜單</a></li> 76 </ul> 77 </li> 78 <li><a class="hide" href="#">一級菜單</a> 79 <ul> 80 <li><a href="#">二級菜單</a></li> 81 <li><a href="#">二級菜單</a></li> 82 <li><a href="#">二級菜單</a></li> 83 </ul> 84 </li> 85 <li><a class="hide" href="#">一級菜單</a> 86 <ul> 87 <li><a href="#">二級菜單</a></li> 88 <li><a href="#">二級菜單</a></li> 89 <li><a href="#">二級菜單</a></li> 90 </ul> 91 </li> 92 <li><a class="hide" href="#">一級菜單</a></li> 93 <div class="clear"></div> 94 </ul> 95 96 </div> 97 98 </body> 99 </html>