Keep jQuery slidedown from pushing page down WITHOUT absolute positioning

I'm trying to create a simple jquery slidedown menu, but it's pushing the page down, and I don't really want开发者_如何学Python that. I can't use absolute positioning.

Here is a jsfiddle of what I have right now.

Any help or suggestions would be greatly appreciated!

Put the navbar in a container with fixed height. This prevents the content from moving.

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

.navbar_container {
    height: 60px;
}

Example jsfiddle

If you want the menu to go over the content you'll have to use absolute positioning though.

Use a containing 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>

... and add to your CSS:

.navbarWrapper 
{
     height: 1em;
}

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