在下拉菜单主要李父推动其兄弟姐妹

Question

我创建了一个简单的下拉菜单，但问题是主<li>父级在下拉效果后推送其兄弟姐妹。

因此，如果您将鼠标悬停在Drop 1上，然后Link 3然后link 6，Drop 2将被推到右侧，因为Drop 1 li将增加宽度。

如何防止这种情况？

FIDDLE:

Answer 1

您需要对子元素使用position: absolute;，并根据您的要求设置下拉位置。

Demo

.menu > li > ul {
    position: absolute;
}

  

注意：如果你愿意，这可以用纯CSS实现   平滑下拉的问题，您可以使用CSS transitions

Answer 2

只需使用position: absolute作为上一个清单：

.menu > li li ul {
    position: absolute;
 }

Demo

Answer 3

点击此处DEMO http://jsfiddle.net/ksXNL/3/

ul {
    padding: 0;
    margin: 0;
}

ul.menu {
    display: table;
    float:left;
}

.menu li {
    float:left;
    display:inline;
    list-style: none;
    width:100px;
}
.menu li a{
    background:red;
}
.menu li ul{
    position:relative;
    left:0;
    top:0px;
    z-index:10;
    width:100%;
}
.menu li li{
    position:relative;
    left:0;
    top:0px;
    list-style: none;
    padding-left: 10px;
    width: 100%;
    z-index:10;
}
.menu li ul li a{
    background:green;
}