Question

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

I’m trying to create a multi-column dropdown/menu widget.

The image on the left is in my web site, the left inside jsFiddle. Apart from the obvious colour + font, I’m not sure why jsFiddle is tampering with the alignment. This is not the issue, the issue is the first column is being hidden under the second… I’ve tried for hours but can’t get them to display side by side.

Answer 1

The problem is that float doesn’t work on absolutely positioned elements, you can either restructure your html so as you have an absolutely positioned parent above .first and .second (as griswoldo’s answer); or set a width for the dropdowns and then position them:

.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/