Nav bar & content moving around after attempting to add drop down menu - html

Question

I've started to add a drop down menu to my 2nd nav bar (the one in blue) but before I've really got started the main links are moving around and the content in separate divs underneath are also moving around but I've no idea why?
Here's a jsfiddle link http://jsfiddle.net/zDGHg/
I'm new to html and css so any help would be much appreciated.
Related code
HTML
<!--BOTTOM NAVIGATION BAR-->
<div id="botnavbar">
<nav id="botnavlinks">
<ul>
<li>Travel Boards</li>
<li>Destinations
<ul>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
<li>sdfgsdfd</li>
</ul>
</li>
<li>Activities</li>
<li>Thingstodo</li>
<li>Accomodation</li>
<li>Transport</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;
}

Answer 1

In your jsfiddle, check the width of your #botnavlinks ul declaration... it's set to 150px. If you set it to a wider width or auto, then your links should look as they should.
Also, when you define something to 0 (e.g. margin: 0px), you don't need to specify the units; this will suffice: margin: 0;
Hope that helps.
Edit:
Also, I forgot to mention that other things affecting your menu bar is the padding left you have for your list items (200px); since you have a 'min-width: 960px' defined in your #botnavlinks declaration, and 6 list items (6 x 200 = 1200px wide), the elements will naturally wrap. ;)