水平に浮かんだ容器内に絶対配置された要素はありますか？

は私が位置を水平にしたいように二つのドロップダウンメニューと一緒にいくつかのテキスト：水平に浮かんだ容器内に絶対配置された要素はありますか？

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

どこの要素は絶対ul要素を配置しているし、最終的には、いくつかのJSは、としてドロップダウンメニューを行動する必要があります「私はドロップダウンだ」が。以下のようなCSSと一緒に

<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>

：私は最初にHTMLが(Here is the JSFiddle)ようなものになるだろうと思った

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

結果であるテキストのみdiv要素（「テキストワン」と「テキストの2つの」）浮動小数点であるが、相対的に配置された要素は適切な幅を維持せず、絶対的に配置されたul要素は互いに重なり合って配置されます。つまり、すべてが左にスカッシュされます。

a）これは修正できますか？

b）は、これは間違ったアプローチであるとdisplay: inline-blockを使用してのような、より良い1が（あるのでしょうか？）

出典

2011-12-08 Timmy O' Mahony