jquery - 在下拉菜单中主 li 父级推其兄弟姐妹

Question

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

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

如何防止这种情况？

小提琴：

Answer 1

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

演示

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

注意：如果你愿意，这可以用纯CSS来完成，对于平滑下拉的问题，你可以使用CSS transitions

Answer 2

只需position: absolute用于您的最后一个列表：

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

演示

Answer 3

在这里查看演示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;
}