le menu horizontal est en cours d'emballage

mon menu horizontal est renvoyé lorsque je redimensionne le navigateur. Je suis nouveau sur le web responsive et j'ai essayé les autres suggestions qui sont mentionnées précédemment et rien n'a fonctionné. Toutes les suggestions seront extrêmement utiles. Mon code est dans ce jsfiddle.le menu horizontal est en cours d'emballage

https://jsfiddle.net/47cfL0ka/

Mon code: --------------- 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>

Source

2017-09-28 Jeremiah Jacob

il y a beaucoup de solutions là-bas, ne peut pas croire aucun d'entre eux travaillaient ... montrer ici un de ceux que vous avez essayé et les gens seront plus en mesure de vous aider. – sissy

Si tout ce que vous voulez est un menu horizontal, le traiter comme une table 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; 
}

Source

2017-09-28 15:04:35

@GianlucaManici cela a fonctionné. Je vous remercie! J'ai continué à essayer avec diplay-inline et sans emballage. Je n'ai rien trouvé. Merci encore. –

le menu horizontal est en cours d'emballage

Répondre

Questions connexes