没有使用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 /*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>