導航欄和試圖添加下拉菜單後移動的內容

我已經開始添加一個下拉菜單到我的第二個導航欄（藍色），但在我真的開始之前主要鏈接正在移動周圍和下面的獨立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; 
}

來源

2013-12-17 user3051288

在你的jsfiddle，請檢查您#botnavlinks ul聲明的寬度......它被設置爲150像素。如果您將其設置爲更寬的寬度或auto，那麼您的鏈接應該看起來應該如此。另外，當你將某些東西定義爲0（例如margin：0px）時，你不需要指定單位;這就足夠了：margin: 0;

希望有所幫助。另外，我忘了提及其他影響你的菜單欄的東西是填充你的列表項目（200px）。由於您在#botnavlinks聲明中定義了'min-width：960px'，並且6個列表項（6 x 200 = 1200px寬），所以元素將自然換行。 ;）

來源

2013-12-17 00:33:33

導航欄和試圖添加下拉菜單後移動的內容

回答

相關問題