水平菜單正在包裝

當調整瀏覽器的大小時，我的水平菜單正在環繞。我是新來的響應式網絡，我嘗試了以前提到的其他建議，但都沒有成功。任何建議都會非常有幫助。我的代碼在這個jsfiddle中。水平菜單正在包裝

我的代碼： --------------- CSS --------------------- -

body{margin:0 auto;padding:0;font: 13px Arial,sans-serif;} 
.clear{clear:both;} 
p,ul,li,a,h1,h2,h3,h4{margin:0;padding:0;} 
h1,h2,h3{margin:10px 0;} 
img.bor{border:#000000 solid 1px;} 
.wrap{margin:0 auto;width:100%;height:auto; border-right:0px solid 
#FFF;border-left:0px solid #FFF;display: block;} 

*{box-sizing: border-box;} 
.row::after { 
content: ""; 
clear: both; 
display: table; 
} 
[class*="col-"] { 
float: left; 
padding: 15px; 
} 
.col-1 {width: 8.33%; } 
.col-10 {width: 83.33%; background-color:#ffffff;} 
.col-12 {width:100%;} 

.header{position:relative;width:100%;height:auto;display:block;} 
.title{position:relative;width:100%;height:auto;display:block;} 
img {max-width: 100%; height: auto;} 

#dropdownMenu, 
#dropdownMenu ul {list-style: none;} 
#dropdownMenu {display:inline-block; width:100%;} 
#dropdownMenu > li {display:inline-block; height: 2.5em; line-height:2em; 
    padding: 0 0em; text-decoration: none;font-size: 1em;} 
#dropdownMenu li a{display: block; height: 2.5em; width:4em; 
line-height: 2em; padding: 0 0em; text-decoration: none;font-size: 1em; } 
#dropdownMenu ul {position:absolute; display: none;z-index: ; padding: 0; } 

#dropdownMenu li:hover ul {display: block;} 

    /* Main menu------------------------------------------*/ 
#dropdownMenu {font-family: Arial; background-color:lightblue;} 
#dropdownMenu > li > a {color: #fff;font-weight: bold;} 
#dropdownMenu > li:hover > a {background: #f09d28;color: #ffffff; } 
#dropdownMenu li:hover ul.dropdown {display: block; } /*dropdown*/ 
#dropdownMenu a:active ul.dropdown {display: block; } /*dropdown*/ 
#dropdownMenu > li:hover{background: #f09d28;} 
#dropdownMenu li.parentmenu, #dropdownMenu li.parentmenu:hover 
{padding-top: 4px; width: 13.2em;border-bottom:0px; text-align: 
center;color: #fff;font-weight: bold; } 

#dropdownMenu a.parentmenu, #dropdownMenu a.parentmenu:hover 
{padding-top: 4px; width: 13.2em;border: 0px; text-align: center; } 

/* Submenu------------------------------------------*/ 
#dropdownMenu ul {background: #ffffff;} 
#dropdownMenu ul li a {color: #727272;} 
#dropdownMenu ul li:hover a {background: #f0d84f; } 

#dropdownMenu a.bord, #dropdownMenu a.bord:hover  
    {border: 1px #d2d2d2; border-bottom: dotted 1px #d2d2d2; border-top: 0px; 
    border-right:solid 1px #d2d2d2; border-left:solid 1px #d2d2d2; 
    height:auto; width: 14.2em;text-align:left;padding:0 0 0 15px;} 



    /********HTML CODE**********************/ 
<body> 
    <!--wrap starts--> 
    <div class="wrap"> 
     <div class="row"> 
     <div class="col-1"> 
     </div> 

     <!-- header starts--> 
     <div class="col-10"> 
      <div class="header"> 
       <div class="title"> 
        <img src="Images/Title.gif" alt="welcome" /> 
       </div> 
      </div> 
      <div> 
     <!--mainmenu starts--> 

    <ul id="dropdownMenu"> 
    <li class="parentmenu">About Us 
     <ul class="dropdown"> 
      <li><a href="#" class="bord">Contact Us</a></li>    
      <li><a href="#" class="bord" >Deals</a></li>    
      <li><a href="#" class="bord">Wheelz</a></li> 
      <li><a href="#" class="bord">Toyz</a></li> 
      <li><a href="#" class="bord">Gears</a></li>    
      <li><a href="#" class="bord">About Us</a></li>    
      <li><a href="#" class="bord">FAQ </a></li> 
     </ul> 
    </li>  

    <li class="parentmenu">Related stuff  
     <ul class="dropdown"> 
      <li><a href="#" class="bord">LM</a></li>    
      <li><a class="bord" href="#" class="bord" >BLC</a></li>    
      <li><a href="#" class="bord">Bjh</a></li> 
      <li><a href="#" class="bord">AM</a></li>    
      <li><a href="#" class="bord">Nm</a></li>    
      <li><a href="#" class="bord">SiS</a></li>     
      <li><a href="#" class="bord">PM</a></li>    
      </ul> 
      </li> 
      <li><a href="#" class="parentmenu">BQ?</a></li> 
      <li><a href="#" class="parentmenu">LL</a></li> 
      <li><a href="#" class="parentmenu">What's New?</a></li>  
      <li><a href="#" class="parentmenu">Contact Us</a></li> 
     </ul> 
      <!--mainmenu ends--> 
      </div> 
      </div> 
      <div class="col-12"> 
      </div> 
     </div>   
    </div><!--wrap ends--> 
</body>

來源

2017-09-28 Jeremiah Jacob

這是很多解決方案，在那裏，不能相信任何人的工作......在這裏展示一個那些你嘗試過的人會更有能力幫助你。 – sissy

如果你想要的是一個橫向菜單，把它當作一個CSS表：

#dropdownMenu { 
    display: table; 
    table-layout: auto; /* Container */ 
} 
#dropdownMenu > li { 
    display: table-cell; 
    vertical-align: middle; /* Each item is a "cell" */ 
} 
#dropdownMenu > li > a { 
    white-space: nowrap; /* Prevent text from wrapping into multiple lines */ 
    padding: 1em; 
}

來源

2017-09-28 15:04:35

@GianlucaManici它的工作。謝謝！我一直嘗試使用diplay內聯和不包裝。沒有得到任何地方。再次感謝。 –

水平菜單正在包裝

回答

相關問題