Flex 容器下拉导航，展开时推送内容答案

【问题标题】：Flex container dropdown navigation, pushes content when expandedFlex 容器下拉导航，展开时推送内容
【发布时间】：2012-12-01 06:02:23
【问题描述】：

我在下面创建了一个小提琴。第一个下拉菜单使用Flexible Box Layout。我试图替换下面由浮动组成的第二个菜单。

Afaik 浮动内容使其脱离了通常的“流程”，这就是为什么我的浮动示例看起来更好的原因。我的目标是使用flexible box layout 来完成类似于浮动导航的事情。我不希望在悬停菜单时下推内容。我希望它像浮动示例一样重叠。我想底线是，我不希望 Flex 容器扩展到包含悬停菜单的整个高度。

我怎样才能做到这一点？感谢您对此的任何意见。

http://jsfiddle.net/hRKgV/

我只添加了 webkit 语法，但 fiddle 似乎在所有主流浏览器中都可以使用（猜想这是由于 fiddle 的工作原理）。

如果它对其他人有帮助（我对此表示怀疑），几乎可以通过添加以下内容来完成：

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

#content{
clear:both;
}

当然，我尝试这种新模型的原因是不必使用其他解决方法。希望这有助于了解我想要完成的工作。

【问题讨论】：

标签： html css flexbox

【解决方案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;
}

【讨论】：

示例中的浮动菜单已经“重叠”了内容。也就是说，“菜单”链接放置在 content2 之上，稍微隐藏了它。我想使用灵活的盒子布局模型（第一个菜单）来做同样的事情。我尝试添加 z-index 但似乎没有帮助。不过谢谢！
对不起。我个人认为一些 javascript 是获得所需内容的最佳选择。