html - <ul> - float li's - 父元素宽度

Question

我要float <li>在ul ul 的左边 - 不设置 width到内<ul>元素
问题是 <ul>在nav与 width:70px; (看看 jsfiddle)

得到以下 ( 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>

如果我设置 e.x. ul ul { width:200px; }它有效，我也试过width:auto - 但这不起作用。

Answer 1

这是因为 position:relative您在 <li> 上设置的在你的CSS中。
在你的 css 中删除这一行，它应该没问题:

li { position:relative; }

检查 demo 以查看其工作情况。

DEMO

---

更新: (在 OP 的新评论之后)
你应该给ul ul一个width具有固定像素。

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

检查 demo 以查看其工作情况。

DEMO