漂浮在绝对定位的div内，放置在相对定位的元素内

Question

我正在创建一个纯CSS悬停下拉菜单，基于一个非常基本的想法。

HTML：

<ul id="top">
  <li>
    <a href="#">Menu item 1</a></li>
  <li>
    <a href="#">This one has submenu</a>
    <div class="submenu">
      <ul>...</ul>
    <div>
  </li>
</ul>

CSS：

div.submenu { 
  display: none; 
  position: absolute;
}
ul#top > li:hover div.submenu { display:block; }

据我所知，这是让这个想法奏效的最低要求。 问题是我希望子菜单是多列，而不是实际使用CSS3多列。

所以我决定将我的子菜单分成多个列表并让它们float: left像这样：

<ul id="top">
  <li>
    <a href="#">Menu item 1</a></li>
  <li>
    <a href="#">This one has submenu</a>
    <div class="submenu">
      <ul>...</ul>
      <ul>...</ul>
      <ul>...</ul>
    <div>
  </li>
</ul>

...和CSS：

div.submenu ul { float:left; }

这很有效，直到我在最后一个主菜单项中得到一个非常大的子菜单，产生这样的结果：

问题是让子菜单落在容器外面是不可接受的。我决定将主菜单项的后半部分标记为class="right"，并将子菜单的右边框与父项的右边框对齐。

li.right div.submenu { right: 0; }
/* this placed the submenu to the right of the entire page;
it needs a positioning context: */

ul#top li { position:relative; }

最后一行导致<ul>停止浮动，只是叠加在一起。

有没有办法让保持浮动而不将 <div class="submenu"> 设置为固定宽度？

互动演示：http://codepen.io/oli-g-sk/pen/ociet

编辑：如果这有所帮助， 允许将子菜单列表项.submenu > ul > li设置为固定宽度。事实上，我已经在演示中做到了。

Answer 1

尝试从float:left删除div.submenu ul并添加以下两条规则：

div.submenu {
    white-space: nowrap;
}

div.submenu ul {
    /* float:left; <-- remove this */
    display: inline-block;
}

演示： http://codepen.io/anon/pen/ApxFd