Question

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

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

四个案例（悬停的项目3和9，Firefox和Chrome）显示在随附的屏幕中。在Firefox和Chrome中试用这个演示来看看我的意思。

这有什么好的解决方案吗？我尝试过列式跨度，但这并不起作用。我不能使该项li相对，因为我希望弹出窗口填满整个高度。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 1

有很多解决方案：

解决方案1：快速解决方案是将右侧列中的子菜单设为不同的类（hassub2），并为其提供不同的边距 - 左侧

.hassup2{
  left: 390px;
}

解决方案2：更智能的解决方案是让li中的所有子菜单都高于5，这可以通过使用nth-child来实现：

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

n + 5 =任何高于5的元素（在这种情况下，所有元素都高于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;
}

提示：使用左代替 margin-left 进行一致的设计，使用left将始终使元素距离左侧200px，它不会依赖或获取对放在它之前的任何元素产生影响，就像边缘的行为一样。

提示：绝对定位元素将查找具有已定义位置的第一个父元素，并将其作为参考点。因此，要使绝对div指向直接父div，父亲必须被赋予位置（相对，固定或绝对）。

Answer 2

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

所以，不需要对css或html进行修改。耶！

CSS3列中的绝对定位

2 个答案: