Html 导航栏和导航栏；尝试添加下拉菜单后内容四处移动

我已经开始在我的第二个导航栏（蓝色）上添加一个下拉菜单，但在我真正开始之前，主链接正在移动，下面单独的div中的内容也在移动，但我不知道为什么

这里有一个JSFIDLE链接

我不熟悉html和css，因此非常感谢您的帮助

相关代码

HTML

---

在JSFIDLE中，检查

#botnavlinks ul

声明的宽度。。。它被设置为150像素。如果将其设置为更宽的宽度或

auto

，则链接的外观应与实际相同

此外，当您将某个值定义为0（例如边距：0px）时，不需要指定单位；这就足够了：

margin:0

希望有帮助

编辑：
另外，我忘了提到影响菜单栏的其他因素是列表项的填充（200px）；由于在
#botnavlinks
声明中定义了“最小宽度：960px”，并且有6个列表项（6 x 200=1200px宽），因此元素将自然换行

<!--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>

#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;
}