html - UL および DIV による動的ドロップダウン

Question

これが私の状況です：

CSSドロップダウンを作りたいです。通常、埋め込みの s でこれを問題なく実行できますUL。ただし、複数列のドロップダウンを作成したいです。ただし、ドロップダウンを動的な幅にする必要があります。

私はテーブルでこれを達成しましたが、sでそれができるかどうかを確認したいと思いますDIV.

ドロップダウンUL/の私の CSSLIは次のとおりです。

#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これらの inner s に with クラスの inner を配置ULすることで、完全に機能し、それらを 3 列に配置し、すべて動的な幅にします。

sでそれを達成したいDIVのですが、問題は、「内側」をフロートする（またはフロートしない）と、DIVすべてのリンクが内側に1行に配置されることです。それらを作成できないようです並んで行きます。OUTSIDE theeドロップダウンを配置するDIVと、問題なく動作します。

助言がありますか？

編集：

これは、それがどのように見えるかです（そしてテーブルで行います）：

sでこんな感じですDIV（間違い）