html - float 在绝对定位的 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; }

直到我在最后一个主菜单项中得到一个相当大的子菜单时，它一直运行良好，产生如下结果:

问题是让子菜单落在容器之外是 Not Acceptable 。我决定将主菜单项的后半部分标记为 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>停止漂浮，只是相互堆叠。

有没有办法让它们在不设置的情况下保持 float <div class="submenu"> 固定宽度？

交互式演示:http://codepen.io/oli-g-sk/pen/ociet

编辑:如果这有某种帮助，可以设置子菜单列表项.submenu > ul > li到一个固定的宽度。事实上，我已经在演示中这样做了。

Answer 1

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

div.submenu {
    white-space: nowrap;
}

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

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