CSS3 列内的绝对定位

Question

我正在尝试设置一个弹出菜单的样式，该菜单在悬停时显示子菜单，在悬停项目的右侧弹出。 我的主要项目使用column-count 分为两列，这就是痛苦的开始。

在 Firefox 中，一切都按预期运行：子菜单会在悬停项目所在的位置弹出。在 Chrome 中，子菜单相对于最左边的列弹出。

四个案例（悬停的项目 3 和 9，Firefox 和 Chrome）显示在附加的屏幕中。在 Firefox 和 Chrome 中尝试演示以了解我的意思。

有没有一个巧妙的解决方案？我尝试了列跨度，但这不起作用。我无法使项目的 li 相对，因为我希望弹出窗口填充整个高度。

ul.first {
    border:1px solid #888;
    position:relative;
    display:inline-block;
    margin:5px;
    padding:0;
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-rule:1px solid #888;
    -moz-column-rule:1px solid #888;
    -webkit-column-rule:1px solid #888;
    background-color:#eee;
}
ul.first li {
    list-style:none;
    display:block;
    width:200px;
    background-color:#eee;
    margin:2px;
    padding:5px;
}
ul.first li:hover {
    background-color:#ddd;
}
ul.first > li.hassub > ul {
    display:none;
    position:absolute;
    margin-left:100px;
    top:0;
    bottom:0;
    background-color:#ddd;
    padding:0 5px;
}
ul.first > li.hassub:hover > ul {
    display:inline-block;
}
ul.first > li.hassub > ul > li {
    background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
    background-color:#eeffee;
}

<ul class="first">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="hassub">Item 3
        <ul>
            <li>Subitem 3-1</li>
            <li>Subitem 3-2</li>
            <li>Subitem 3-3</li>
            <li>Subitem 3-4</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li class="hassub">Item 9
        <ul>
            <li>Subitem 9-1</li>
            <li>Subitem 9-2</li>
            <li>Subitem 9-3</li>
            <li>Subitem 9-4</li>
        </ul>
    </li>
    <li>Item 10</li>
</ul>

http://jsfiddle.net/cfckw5jz/6/

Answer 1

有很多解决方案：

解决方案1： 一个快速的解决方案是给右列内的子菜单不同的类（hassub2），并给它不同的margin-left

.hassup2{
  left: 390px;
}

解决方案2：更聪明的解决方案是给li的5以上的所有子菜单一个不同的边距，这可以通过使用nth-child来实现：

ul.first > li:nth-child(n+5) > ul{
  left: 390px;
}

n + 5 = 任何大于 5 的元素（在这种情况下，所有 li 都大于 5）

解决方案 3： 您也可以将其分成 2 个 UL 并将它们向左浮动（或使用 display: inline-block），并将相对于 UL 的位置指定为子的参考点-菜单：

li{ list-style: none; }

ul.left,
ul.right{
  float: left;
  width: 200px;
  position: relative;
}

.right li,
.left li{
  float: left;
  width: 100%;
  background-color: #eee;
  margin: 2px;
  padding: 5px;
}

.right li ul,
.left li ul{
  display: none;
  position: absolute;
  left: 200px;
  top:0;
  height:100%;
}

.right li ul li,
.left li ul li{
  width: 100%;
  padding: 5px;
  margin: 2px;
}

.right li:hover ul,
.left li:hover ul{
  display: block;
}

提示：使用 Left 而不是 margin-left 以获得一致的设计，使用 left 将始终使元素距离左侧 200px，它不会依赖或获取影响放置在它之前的任何元素，例如边距的行为。

提示：绝对定位元素将寻找具有定义位置的第一个父亲并将其作为参考点。因此，要使绝对 div 引用直接父亲 div，必须给父亲位置（相对、固定或绝对）。

Answer 2

今天我意识到这个问题已在最新的 Chrome 版本 55 中得到修复，现在 Chrome 的行为与其他现代浏览器一样。

因此，无需对 css 或 html 进行修改。耶！