html - 下拉到页面底部

Question

http://jsfiddle.net/#&togetherjs=d0aVDl0LjI

“游戏”选项卡的下拉菜单一直到页面底部，而不是选项卡的正下方。

知道发生了什么事吗？我查看了 CSS，没有发现任何问题。

Answer 1

您需要告诉系统列表应该绝对放置在何处。

做到这一点的方法是给父级 position: relative;。

更改您的 css 以包含如下内容:

li {
    padding-left: 10px;
    display:inline;
    background-color: #2c3e50;
    line-height:40px;
    position: relative;
}

完成后，下拉菜单会垂直显示在正确的位置，但一直显示在左侧。要解决这个问题，只需将 left: 0; 添加到 ul subnav css:

.nav ul ul {
    display: none;
    position: absolute;
    top:100%;
    left: 0;
}

最后，您需要将子导航 li/a 元素设置为显示 block ，以便它们正确显示:

.nav ul ul li {
    float:none;
    position: relative;
    display: block;
}

.nav ul ul li a {
    display: block;   
}