1

我在下面创建了一个小提琴。第一个下拉菜单使用的是灵活框布局。我试图替换下面由浮动组成的第二个菜单。

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

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

http://jsfiddle.net/hRKgV/

我只添加了 webkit 语法，但小提琴似乎适用于所有主要浏览器（猜想这是由于小提琴的工作原理）。

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

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

#content{
clear:both;
}

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

4

1 回答 1

0

我不确定我是否完全理解，但我会猜测一下。重叠内容而不推送的菜单？您想使用类而不是 ID。像这样的东西：JSFiddle 示例

#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;
}
​
于 2012-12-13T11:10:26.813 回答