html - CSS:多列下拉菜单

Question

jsFiddle:http://jsfiddle.net/4z2Vx/

我正在尝试创建一个多列下拉菜单/菜单小部件。

左边的图片在我的网站上，左边是jsFiddle里面的。除了明显的颜色+字体外，我不确定为什么 jsFiddle 会篡改对齐方式。这不是问题，问题是第一列隐藏在第二列之下...我已经尝试了几个小时，但无法让它们并排显示。

Answer 1

问题是 float不适用于绝对定位的元素，您可以重组您的 html，以便在 .first 之上有一个绝对定位的父级和 .second (作为格里斯沃尔多的回答)；或为下拉菜单设置宽度，然后定位它们:

.dropdown li ul { 
    display: none; 
    border:black 1px solid;  
    position:absolute;
    background-color:white; 
    width: 150px;  /*set the width*/  
} 


.second {
    left: 150px; /*set the position*/
}​

http://jsfiddle.net/tYeDk/