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; 
} 
​