css：display：inline-block和span与position：relative建立多列下拉列表

Question

I try to created multicolumn menu here ( updated link is HERE ):

I made used of display: inline-block strategy to make (horizontal) rows. And seems it works. But it stops work when I wrapped it into the span which comes with position:relative .

<section>
    <button>123</button>
    <button>123</button>

    <span class="dropdown">
    <a href="#">*</a>    <!-- this is a link that should be inline with buttons -->

            <div class="menu">
                <div class="row">
                    <ul>
                        <li>11111111111111111111111111</li>
                        <li>1111111111111</li>
                        <li>111</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>2222222222</li>
                        <li>222222222222222222222</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>33</li>
                        <li>33</li>
                        <li>33</li>
                    </ul>
                </div>
            </div>    
</span>
</section>

The href link in the span represents a button or link where I would click to make menu appeared. I have to have position relative in the span to make menu appears on right place, relatively to it. (all buttons and link should be on the same horizontal line)

Question: how to make it working?

It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).

UPDATE :

I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/

Just put a little more detail that was not shown on previous demo, to show what I want. I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.

Answer 1

Simply add display:block to span

see DEMO

See why you need to add display:block

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a element, but <div> is a block-level element whereas a <span> is an inline element.

Source: Mozilla Developer Network

Answer 2

Do you mean something like this?: Fiddle

.dropdown {
    position:relative;
    display: block;
    padding: 10px;
}

a {
   position:absolute;
   top: -15px;
   left: 100px;
    }

Answer 3

Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown

Like:

.dropdown {
    position:relative;
    display: block;
}

Answer 4

I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:

Before: http://jsfiddle.net/uz0do787/32/

After

http://jsfiddle.net/uz0do787/34/

But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.

And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.