css dropdown menu takes up space after hovering

See more:

CSS

HTML

This is the code i am using for css drop down menu
after hovering, menu gets dropdown,and it takes up space, which makes other elements on the page to shift downward

ul#topnav
{
    width: 35em;
    height: 2em;
    margin: 1em auto 0; 
    font-size: 1em;
}
ul#topnav li
{
   position : relative; 
    float: left; 
    width: 5em; 
    line-height: 2em;
    z-index:99000;
    list-style:none;   
}
ul#topnav li.noborder
{
    border-height: none;
}

ul#topnav li.hover
{
    background-color: #c4c5c7;
}
ul#topnav li a
{
    display: block;
    float: left;
    width: 100%;
}

ul#topnav li ul
{
    display:none
}
ul#topnav li:hover ul
{
    display: inline;
    float: left;
    width: 10em;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1em;
}

ul#topnav li:hover ul li
{
    width: 100%;
    height: 2em;
    border: none;
    border-bottom: 1px dotted #656667;
    overflow: hidden;
}

ul#topnav li:hover ul li a
{
    display: block;
    margin: 0;
    padding: 0 0 0 .1em;
    height: 100%;
    line-height: 2em;
}

ul#topnav li:hover ul li a:hover
{
    background-color: #dldf8a;
}

Please suggest some solution