Dynamic Drop Down with UL and DIVs - html

Question

Here's my situation:
I want to make a CSS dropdown. Normally I can do this no problem with embedded ULs. However, I want to make a multi-column dropdown. I need the dropdowns to be of dynamic width though.
I have accomplished this with tables, but Id like to see if I could do it with DIVs.
My CSS for the drop down UL/LI is:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float:left;
margin-left:16px;
}
#nav li ul {
position: absolute;
display: none;
z-index:10;
}
#nav li:hover ul {
display:block;
}
#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}
#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
That creates the horizontal navigation with drop downs with this HTML:
<ul>
<li><a class="main">HO Scale</a>
<ul>
</ul>
</li>
</ul>
Using a table, I can put it inside the inner UL and use this CSS
.inner{
float:left;
background:#FFF;
border:1px solid #000;
border-top:0;
padding:12px 0 12px 12px;
}
By putting a Table with class of inner in those inner ULs it will work perfectly, space them out, 3 columns, all dynamic width.
I'd like to accomplish that with DIVs, but the problem is when I float (or don't float) the "inner" DIV it puts all of the links on the inside one to a line, I can't seem to make them go side by side. If I put the DIV OUTSIDE thee dropdown, it works just fine.
Any suggestions?
EDIT:
This is how it should look (and does with tables):
This is how it looks with DIVs (wrong)