<ul> - float li's - parent element width

Question

I want to float <li> to the left in ul ul - without setting a width to the inner <ul> element
The problem is that the <ul> is in a nav with width:70px; (take a look at jsfiddle)

Got the following ( http://jsfiddle.net/qfemF/ )

CSS:

nav {
    width:70px;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
}

li {
    position:relative;
}

ul ul {
    position:absolute;
    left:70px;
    width:auto;
}

ul ul li {
    float:left;
}

HTML:

<nav>
    <ul>
        <li><a href="">Test</a>
            <ul>
                <li><a href="">sub1</a></li>
                <li><a href="">sub2</a></li>
            </ul>
        </li>
    </ul>
</nav>

If i set ex ul ul { width:200px; } ul ul { width:200px; } it works, i also tried width:auto - but that doens't work.

Answer 1

This is because of the position:relative that you have set on your <li> in your css.
Delete this row in your css and it should be fine:

li { position:relative; }

Check the demo to see its working.

DEMO

---

Update: (after new comment from OP)
You schould give the ul ul a width with fixed pixels.

ul ul {
    ....
    width:200px;      /* instead of width:auto; */
}

Check the demo to see its working.

DEMO

Answer 2

C Travel's answer is correct, you need to remove position: relative; from your li

But if you can't do that for one reason or another, an alternative is to set display: table; on ul ul

Demo