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

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

1 个答案: