保持jQuery不会推下页面而没有绝对定位

Question

我正在尝试创建一个简单的jquery滑动菜单，但它正在推动页面，我真的不想要那样。我不能使用绝对定位。

这是我现在所拥有的jsfiddle。

非常感谢任何帮助或建议！

Answer 1

使用包含div：

<div class="navbarWrapper">   
    <ul class="navbar">    
        <li class="link">Username
            <div class="dropdown">
                <a href="#">Profile</a><br />
                <a href="#">Logout</a>
            </div>
        </li>
    </ul>
</div>

...并添加到您的CSS：

.navbarWrapper 
{
     height: 1em;
}

.navbar 
{
    ...   
    position: absolute;
    ...
}

Answer 2

将导航栏放在高度固定的容器中。这可以防止内容移动。

<div class="navbar_container">
    <ul class="navbar">    
...
    </ul>
</div>

.navbar_container {
    height: 60px;
}

Example jsfiddle

如果您希望菜单覆盖内容，您必须使用绝对定位。