使用UL和DIV进行动态下拉

Question

这是我的情况：

我想制作一个CSS下拉列表。通常我可以使用嵌入式UL来解决这个问题。但是，我想制作一个多列下拉列表。我需要下拉列表具有动态宽度。

我已经用表格完成了这项工作，但我想知道我是否可以使用DIV来完成。

我的下拉UL / LI的CSS是：

#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;
}

使用此HTML创建带有下拉列表的水平导航：

<ul>
 <li><a class="main">HO Scale</a>
   <ul>

   </ul>
 </li>
</ul>

使用表格，我可以将其放在内部UL内并使用此CSS

.inner{
    float:left;
    background:#FFF;
    border:1px solid #000;
    border-top:0;
    padding:12px 0 12px 12px;
}

通过在内部Table中添加内部类UL，它将完美地工作，将它们分开，3列，所有动态宽度。

我想用DIV来实现这个目标，但问题是当我浮动（或不浮动）“内部”DIV时，它会将所有链接放在里面一到一条线，我似乎无法让它们并排。如果我把DIV OUTSIDE thee下拉，它就可以了。

有什么建议吗？

编辑：

这应该是它的外观（以及表格）：

这是DIV s（错误）

的外观