html - 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

有很多解决方案:

解决方案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的位置作为sub的引用点-菜单:

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，必须给父位置(相对、固定或绝对)。