Absolute element inherits parent width but I want it to stretch according its children

Question

I'm building a css-menu like this jsfiddle: http://jsfiddle.net/YXT7j/48/

HTML:

<ul id="nav">
<li><a>item 1</a>
    <ul class="sub" style="width: 200px;">
        <li><a>item 1.1</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>
        </li>
        <li><a>item 1.2</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>           
        </li>
    </ul>
</li>
<li><a>item 2</a>
    <ul class="sub">
        <li><a>item 2.1</a></li>
        <li><a>item 2.2</a></li>
        <li><a>item 2.3</a></li>
    </ul>  
</li>
<li><a>item 3</a>
    <ul class="sub">
        <li><a>item 3.1</a></li>
        <li><a>item 3.2</a></li>
        <li><a>item 3.3</a></li>
    </ul>  
</li>
</ul>

CSS:

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
}
.sub>li {
    float: left; 
    width: 100px;        
}
#nav>li:hover .sub {
    display: block;
}

​ ​

Under item 1 you can see how there are 2 lists next to each other. Also in the html you see an inline width set. Without the inline width (or a css equivalent) the lists are shown underneath eachother instead of next to eachother ( http://jsfiddle.net/YXT7j/34/ ).

Now the number of lists in the submenu is dynamic. That's why I can't set the width in css and I'm using inline-styles for now (100*numlists+'px'). But that's just ugly. I'd like the submenu to resize to its li-children like any other element. Unfortunately, without a width set the submenu follows the width of its parent menu-item instead.

So, tl/dr: How can I get http://jsfiddle.net/YXT7j/48/ without setting an explicit width on the ul.sub.

Thanks!

Answer 1

This is the js-fiddle for my solution: http://jsfiddle.net/YXT7j/66/

You'll have to make the lists in the submenu inline-blocks instead of floating them. Then you tell the submenu not to wrap inline items with white-space: nowrap;

It's a similar answer I'd seen before for other problems. Though those answers were to prevent text (which standard is inline) from wrapping, not complete block-elements.

So, for completeness sake, the code:

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub multi">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>
​

​

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;

    white-space: nowrap;
}
.sub>li {
    width: 100px;   
}
.multi.sub>li { 
    display: inline-block;
}
#nav>li:hover .sub {
    display: block;
}

​

Answer 2

While you wait for a better answer, a hacky solution is to do this:

#nav>li:hover .sub {
    display: block;
    width:1000%;
}

http://jsfiddle.net/YXT7j/39/