drop down menu floating issue - css

Question

Made this menu this afternoon. Tab number 1 has a drop down that consists of two divs that should each be floated left so there are two divs next to each other, however, it does not work and the second lines up underneath the first.
This is the line which I thought would do the floating :
/*sub container div*/
.container ul li .drop div{
float:left;
}
Fiddle
HTML
<!-- start menu -->
<div id="top_menu">
<nav>
<div class="container">
<ul>
<li><img class="home" alt="" height="20" src="/images/trans.gif" width="20"> </li>
<li>number 1
<div class="drop">
<div>
category 1
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 2
<ul>
<li>test1</li>
</ul>
</div>
<div>
category 3
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 4
<ul>
<li>test1</li>
</ul>
category 5
<ul>
<li>test1</li>
</ul>
</div>
<div>
</div>
</li>
<li>number 2</li>
<li>number 3</li>
<li>number 4</li>
<li>number 5</li>
</ul>
</div>
</nav>
</div>
<!-- end menu -->
CSS
#top_menu{
background:#cccccc url('/images/top_menu_bg.png') repeat;
}
.container{
position:relative;
z-index:1000;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
}
.container ul{
white-space:nowrap;
/*display:table;*/
}
.container ul, .container li{
padding:0;
margin:0;
list-style:none;
}
/*top level link*/
.container ul a{
display:block;
color:#666666;
text-decoration:none;
padding:0 25px;
line-height:40px;
border-right:1px #b2b2b2 solid;
}
/*sub container*/
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
}
/*sub container div*/
.container ul li .drop div{
float:left;
}
.container ul li .drop li{
display:block;
border:0;
}
.container > ul > li{
float:left;
display:block;
position:relative;
}
.container ul li:hover > .drop{
top:auto;
display:block;
}
/*sub level top link*/
.container ul li .drop a{
line-height:25px;
border:0;
padding:0 30px 0 10px;
color:#000000;
}
/*sub level top link hover*/
.container ul li .drop a:hover{
color:#00396d;
background:#c4dcec;
}
/*sub level link normal*/
.container ul li .drop li > a{
color:#666666;
}
/*sub level link hover*/
.container ul li .drop li:hover > a{
background:#c4dcec;
color:#00396d;
}
/*top level link hover*/
.container li:hover > a{
color: #000000;
}
/*home button*/
.container ul li img.home{
background:url('/images/top_menu_home.png') 0 0;
width:20px;
height:20px;
}
/*home button hover*/
.container ul li:hover > a img.home{
background:url('/images/top_menu_home.png') -20px 0;
}

Answer 1

Sorry for the late reply =) Still, if you want to stack several elements of variable width horizontally, I'd suggest using display:inline-block.
/*sub container div*/
.container ul li .drop div{
display:inline-block;
vertical-align:top;
}
The fiddle (works in fFF 8, Chrome 12, IE 9).
The drawback is spaces between elements, which can be successfully eliminated

Answer 2

.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
width: 300px; //set width
}
/*sub container div*/
.container ul li .drop div{
float:left;
width:50%; //optional
}