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（例如margin：0px）时，您无需指定单位;这就足够了：margin: 0;

希望有所帮助。

编辑：另外，我忘了提到影响菜单栏的其他因素是你的列表项目的填充（200px）;因为你的#botnavlinks声明中定义了'min-width：960px'，以及6个列表项（6 x 200 = 1200px宽），元素将自然换行。 ;）

导航栏＆amp;尝试添加下拉菜单后内容移动

1 个答案: