Slide panel rykker content

Hey !

Jeg er lige pt. igang med at lave en ny hjemmeside. Til dette formål har jeg valgt at lave et slide panel, som slider ned fra toppen.
Mit problem er bare, at når panelet slider, så rykker alt content. Det vil jeg ikke have det skal gøre.

Herunder kommer min kode:

HTML:
div id="top-panel">
        <form action="#" method="post">
        <label>Brugernavn: </label><input name="brugernavn" class="textfield" type="text" size="14" />
        <label>Password: </label><input name="adgangskode" class="textfield" type="password" size="14" />
        <input type="submit" class="login" value="Login">
        </form>
    </div>
    <div id="sub-panel">
        <a href="#" id="toggle"><span>Login</span></a>
    </div>

java script:
$(document).ready(function(){

    $("#toggle").click(function(){
        $("#top-panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
   
   
});

CSS:
#top-panel{
    background:#e8f3c6;
    border-bottom:3px solid #a6c34e;
    padding:14px 20px;
    text-align:right;
}
#sub-panel{
    text-align:center;
}
#sub-panel a{
    width:150px;
    float:right;
    color:#FFFFFF;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(../img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
    padding:6px;
    background:url(../img/sub-right.png) right bottom no-repeat;
    display:block;

}


Håber I kan hjælpe mig med mit problem !