Flex容器下拉導航，展開時推送內容

Question

我在下面創建了一個小提琴。第一個下拉菜單使用Flexible Box Layout。我試圖替換下面的由浮動組成的第二個菜單。

Afaik浮動內容將它帶出了通常的「流動」，這就是爲什麼我的浮動示例看起來更好。我的目標是使用flexible box layout來完成類似於浮動導航的內容。我不想在菜單懸停時按下內容。我希望它像浮動的例子重疊。我想底線是，我不想讓Flex容器擴展到包含懸停菜單的全部高度。

我該如何做到這一點？感謝您對此提出任何意見。

http://jsfiddle.net/hRKgV/

我只添加了webkit的語法，但小提琴似乎在所有主要瀏覽器工作（猜這是因爲如何小提琴作品）。

如果它可以幫助其他人（我懷疑），它幾乎可以加入此來完成：

#flexmenu ul{  
float:left; 
width:100%; 
} 

#content{ 
clear:both; 
} 

當然，爲什麼我嘗試這種新模式是不是有使用其他替代方法的原因。希望這有助於看到我想要完成的事情。

Answer 1

我不確定我完全理解，但我會猜測。重疊內容而不推動它的菜單？你想要使用類而不是ID。像這樣：JSFiddle Example

#content, #content2 { 
background-color:#AABBCC; 
    clear:both; 
} 

.floatedmenu { 
    float:left; 
    margin:0; 
    padding:0; 
    width:100%; 
    position:relative; 
} 

.floatedmenu ul { 
    clear:left; 
    margin:0; 
    padding:0; 
    float:right; 
    position:relative; 
    right:50%; 
} 

.floatedmenu ul li { 
    text-align:center; 
    float:left; 
    position:relative; 
    left:50%; 
} 

.floatedmenu ul ul { 
    display:none; 
    position:absolute; 
    right:auto; 
} 

.floatedmenu ul li:hover ul{ 
display:block; 
    z-index: 2; 
    background-color: #FFF; 
} 

.floatedmenu ul ul li { 
    left:auto; 
    margin:0; 
    clear:left; 
    width:100%; 
} 

.floatedmenu ul li a { 
    display:block; 
    margin: 2px; 
    z-index: 2; 
} 
​