Панель навигации и содержимое перемещаются после попытки добавить выпадающее меню

Я начал добавлять выпадающее меню в свою вторую навигационную панель (синюю), но до того, как я действительно начал работу, основные ссылки перемещаются, а содержимое в отдельных divs также перемещается, но я не знаю, почему?

Здесь ссылка jsfiddle http://jsfiddle.net/zDGHg/

Я новичок в html и css, поэтому любая помощь будет высоко оценена.

Связанный код

HTML

<!--BOTTOM NAVIGATION BAR-->
            <div id="botnavbar">
                <nav id="botnavlinks">
                    <ul>
                        <li><a href="travelboards.html">Travel Boards</a></li>
                        <li><a href="destinations.html">Destinations</a>
                            <ul>
                                <li>sdfgsdfd</li>
                                <li>sdfgsdfd</li>
                                <li>sdfgsdfd</li>
                                <li>sdfgsdfd</li>
                            </ul>
                        </li>
                        <li><a href="activities.html">Activities</a></li>
                        <li><a href="thingstodo.html">Thingstodo</a></li>
                        <li><a href="accomodation.html">Accomodation</a></li>
                        <li><a href="transport.html">Transport</a></li>

                    </ul>
                </nav>
            </div>
<!--CONTENT---->
            <div id="content">
                <div id="slidemenus">
                <h1>Filter By</h1>

            <!--Put content here-->
                    <ol>
                        <li>Price per Trip</li>
                        <li>Duration</li>
                        <li>Departure Date</li>
                        <li>Travel Styles</li>
                        <li>Activities</li>
                        <li>City</li>
                        <li>Country</li>
                    </ol>
                </div>


                <div id="featured">FEATURED CONTENT
            <!--Put content here-->
                    <ol>
                        <li>product info</li>
                    </ol>
                </div>
            </div>

CSS

#botnavbar{
height:40px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
min-width:960px;
margin: 0 auto;
text-align:left;
padding-left:200px;
}
#botnavlinks ul{
list-style:none;
height:35px;
}
#botnavlinks li{
height:35px;
float:left;
padding-right: 60px;
}
#botnavlinks li a:link, a:visited{
display:block;
color:#fff;
font-family:Papyrus;
padding:8px;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0,0,0,0.5); /*For embossed effect*/
text-align:center;
}
#botnavlinks li a:hover{
background-color:#1d3564;
}
#content{
height:500px;
background-color:#fff;
}
#slidemenus{
border:solid black 1px;
width:30%;
min-height:500px;
float:left;
}
#featured{
border:solid black 1px;
width:60%;
min-height:500px;
float:left;
}