jQuery slideDown problem
<p>When you click on the login button ,shows some space when the slideDown event is running.
What causes that white space?</p>

<p>Here's the page - <a href="http://rssreaderbg.net/pubsubbub/example/cssexam/index.php" rel="nofollow">http://rssreaderbg.net/pubsubbub/example/cssexam/index.php</a></p>

<hr>

<pre><code>$("#login").click(function() {
    $("#loginform").slideDown();
    $("#home").attr("class","");
    $("#login").attr("class","selected");
});
</code></pre>

<hr>

<pre><code>#nav {
    float:left;
    margin-left:100px;
    padding-top:17px;
    list-style-type:none;
}

#nav li {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline*/
    padding-right:0px;
    float:left;
}

#nav a {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline*/
    padding-left:9px;
    float:left;
    height:52px;
    color:white;
    float:left;
    font:28px Microsoft Sans Serif;
    text-decoration:none;
    background: url(left.png) no-repeat;
}

#nav a strong {
    display: inline-block; /*  ??? ??????? ?? ????? ?? inline*/
    padding:6px 19px 0 0;
    margin-left:9px;
    height:52px;
    float:left;
    padding-top:10px;
    cursor:pointer;
    background: url(button.png) no-repeat right top;
}

#nav a:hover{
    background: url(lhover.png) no-repeat;
}

#nav a:hover strong {
    background: url(lbutton.png) no-repeat right top;
}
#nav a.selected {
    cursor:default;
    background: url(lhover.png) no-repeat;
}

#nav a.selected strong {
    cursor:default;
    background: url(lbutton.png) no-repeat right top;
}
#nav a.selected:hover {
    cursor:pointer;
    background: url(lhover.png) no-repeat;
}

#nav a.selected strong:hover {
    cursor:pointer;
    background: url(lbutton.png) no-repeat right top;
}
</code></pre>
