無法在div中導航

嗨即時通訊在響應式網站上工作。現在我的導航存在問題，我無法在我的div中居中。另外，我的下拉菜單有問題，當我的導航開始適合div時，會摧毀otder。無法在div中導航

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 

     <title>Test</title> 
    </head> 

    <body> 
     <div id="body_wrapper"> 
       <div id="header_wrapper" class="clearfix"> 
        <div id="header_content" class="content_container"> 
         <div id="language_wrapper"> 

          <div class="language active"> 
           <span>Deutsch</span> 
          </div> 
          <div class="language"> 
           <a href="#"> 
           <span>Englisch</span> 
           </a> 
          </div> 
         </div> 
         <div id="hLogo_wrapper"> 
          <a href="#"> 
           <img src="images/starbucks.png"> 
          </a> 
         </div> 

        </div> 

       </div> 
       <div id="inner_content" class="content_container"> 
        <div class="mainMenu clearfix" > 
         <ul class="clearfix"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Aktuelles</a></li> 
          <li> 
           <a href="#">Speisekarte ￬</a> 
           <ul class="hidden"> 
            <li><a href="#">Mittagstisch</a></li> 
            <li><a href="#">Frühstück</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Reservierung</a></li> 
          <li><a href="#">Gallerie</a></li> 
          <li><a href="#">Kontakt</a></li> 
          <li><a href="#">Jobs</a></li> 
         </ul> 
        </div> 

       </div> 
       <div id="footer_wrapper"></div> 
     </div> 

    </body> 
</html>

，這裏是我的CSS文件至今

* { 
    margin: 0; 
    padding: 0; 
    font-family: Trebuchet MS; 

    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
img {border: 0;} 

.clearfix:after{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 


.content_container{ 
    margin: 0 auto; 
    width: 62.5%; 
} 

#inner_content{ 
} 


#header_wrapper{ 
    height: 220px; 
    background: url('images/header.png'); 


} 

#hLogo_wrapper img{ 
    max-width: 100%; 

} 


#language_wrapper{ 
    float: right; 
} 
#language_wrapper .language{ 
    display: inline; 
} 

#hLogo_wrapper{ 
    float: left; 
} 
.mainMenu{ 
    height: 60px; 
    margin: 0 auto; 
} 

.mainMenu ul { 
    position: relative; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    left: 10%; 

} 


.mainMenu li { 
    display:inline; 
    float: left; 
    margin-right: 1px; 
} 

.mainMenu li a { 
    display:inline-block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 


.mainMenu li:hover a { 
    background: #19c589; 
} 


.mainMenu li:hover ul a { 
    background: #f3f3f3; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
    z-index: 120; 

} 

/*Hover state for dropdown links*/ 
.mainMenu li:hover ul a:hover { 
    background: #19c589; 
    color: #fff; 
} 

.mainMenu li ul { 
    display: none; 
} 


.mainMenu li ul li { 
    display: block; 
    float: none; 
} 


.mainMenu li ul li a { 
    width: auto; 
    min-width: 140px; 
    padding: 0 20px; 
} 


.mainMenu ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
}

來源

2014-06-23 ComputerDully

歡迎來到SO。你的意思是*當我的導航開始適合他們的時候，摧毀otder。* ..？你可以說得更詳細點嗎..？如果可能的話，請在[jsfiddle]（http://jsfiddle.net）或圖像中添加一個簡單演示..？ –

你留下標記在你的菜單微升10％，這是造成你的下拉內容爲斷開狀態-centered。

.mainMenu ul { 
position: relative; 
list-style-type:none; 
margin:0; 
padding:0; 
left: 10%;

將左改爲0;將理順這一點。

.mainMenu ul { 
position: relative; 
list-style-type:none; 
margin:0; 
padding:0; 
left: 0;

來源

2014-06-23 21:53:07 chrisl0lz

無法在div中導航

回答

相關問題