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

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!