CSS3 列内的绝对定位

Question

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

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

四种情况（悬停项 3 和 9、Firefox 和 Chrome）显示在附加屏幕中。在 Firefox 和 Chrome 中尝试演示以了解我的意思。

有什么好的解决方案吗？我尝试了 column-span，但这不起作用。我无法使项目的 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

有多种解法：

解决方法一：一个快速的解决方法是给右栏里面的子菜单不同的class（hassub2），给它不同的margin-left

.hassup2{
  left: 390px;
}

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

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

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

方案三：你也可以把它分成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 进行修改。耶！

CSS3 列内的绝对定位

Absolute positioning within CSS3 columns

html

css

css-multicolumn-layout