css - 水平 float 容器中的绝对定位元素？

Question

我想水平放置一些文本以及两个下拉菜单，例如:

Text One : | I'm a dropdown |     Text Two: | I'm a second dropdown |

where the 'I'm a dropdown' elements are absolutely positioned ul elements and will eventually have some JS to act as dropdown menus. I initially thought the HTML would be something like (Here is the JSFiddle):

<div id="wrapper" class="clearfix">
    <div>
        Tet One
    </div>
    <div class="dropdown">
        <ul>
            <li>I'm a dropdown</li>
            <li>Value One</li>
        </ul>
    </div>
    <div>
        Text Two
    </div>
    <div class="dropdown">
        <ul>
            <li>I'm a second dropdown</li>
            <li>Value Two</li>
        </ul>
    </div>
</div>

连同 CSS，例如:

#wrapper > div{
    float: left;
}
#wrapper > div.dropdown{
    position: relative;
}
#wrapper > div > ul{
    position:absolute;
    width: 100%;
}

结果是纯文本 div 元素('Text One' 和 'Text Two') float 良好，但相对定位的元素没有保持适当的宽度和绝对定位ul 元素被放置在彼此之上，即所有东西都被压到左边。

a) 这可以修复吗？

b) 这是错误的方法吗？是否有更好的方法(比如使用 display: inline-block？)

Answer 1

做了一些改进
http://jsfiddle.net/cvZfF/74/

---

这是给初学者的

http://jsfiddle.net/cvZfF/56/

您需要所有内容都是相对位置的，而不是绝对的；OnClick 使用 JavaScript(在我的例子中是 jQuery)克隆 UL 并将其显示在原始位置。剩下的就看你了。