Absolute positioning within CSS3 columns

Question

I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item. My main items are split into two columns using column-count, and this is where the misery begins.

In Firefox, everything behaves as expected: the submenu pops out where the hovered item is. In Chrome, the submenu pops up relative to the leftmost column.

The four cases (hovered items 3 and 9, Firefox and Chrome) are shown in the attached screen. Try the demo both in Firefox and Chrome to see what I mean.

Is there a neat solution for this? I tried column-span, but that doesn't work. I cannot make the item's li relative because I want the popup to fill the complete height.

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

There are many solutions:

Solution 1: A quick solution is to Give the sub-menu inside the right column different class (hassub2), and give it different margin-left

.hassup2{
  left: 390px;
}

Solution 2: A smarter solution is to give all sub-menus inside li's above 5 a different margin, this can be achieved by using nth-child:

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

n + 5 = any element above 5 (in that case all li's above 5)

Solution 3: You can also separate it into 2 UL's and float them left (or use display: inline-block), and assign position relative to the UL's to be the reference point for the sub-menu:

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

Tip: use Left instead of margin-left for a consistent design, using left will always make the element 200px away from left side, it will not depend or get effected on any element placed before it, like what margins behave.

Tip: Absolute positioned element will look for the first father with a defined position and make it its reference point. So to make an absolute div refer to the direct father div, the father must be given position (relative, fixed, or absolute).

Answer 2

Today I realized that this issue was fixed in the latest Chrome release 55 and now Chrome behaves as the other modern browsers.

So, no need to make modifications to css nor html. Yay!