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

Question

我已经开始向我的第二个导航栏(蓝色的那个)添加一个下拉菜单，但在我真正开始之前，主要链接正在四处移动，下面单独的 div 中的内容也在四处移动，但是我不知道为什么？

这是一个 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;
}

Answer 1

在您的 jsfiddle 中，检查您的 #botnavlinks ul 声明的宽度...它设置为 150px。如果您将它设置为更宽的宽度或 auto，那么您的链接应该看起来像它们应该的那样。

此外，当您将某些内容定义为 0(例如边距:0px)时，您无需指定单位；这就足够了:margin: 0;

希望对您有所帮助。

编辑:另外，我忘了提到影响菜单栏的其他因素是列表项的剩余填充(200 像素)；由于您在 #botnavlinks 声明中定义了“min-width: 960px”，并且有 6 个列表项(6 x 200 = 1200px 宽)，因此元素将自然换行。 ;)