我目前有一个css< ul>< li>下拉菜单使用以下代码.不幸的是,我希望子菜单显示在2列中,因为该子菜单中有大约16个项目.有谁知道如何使用以下代码使这个下拉菜单2列?
.menu{ border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif; font-size:18px; font-weight:bold; } .menu ul{ background:#006633; height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#006633 url("../images/seperator.gif") bottom right no-repeat; color:#ffffff; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover,.menu ul li:hover a{ background: #003f20 url("../images/hover.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ background:#006633; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('../images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:30px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover,.menu li ul li:hover a{ background:#003f20 url('../images/hover_sub.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; }
解决方法
使ul的宽度是li的两倍,然后浮动li的左边
http://www.behemothdan.com/2011/05/faux-mega-menu-in-wordpress/