Dropdown-Menü, wenn die Größe des Browsers geändert wird

Question

Ich mache ein horizontales Dropdown-Menü. Es sieht wie folgt aus:

[menu1][menu2][menu3][menu4] 

Aber wenn ich (weniger breit) meinem Browser Größe ändern, erscheint das Menü wie:

[menu1][menu2] 

[menu3][menu4] 

Ich möchte es in Linie die ganze Zeit bleiben!

EDIT: meine CSS-Datei

/* General */ 
 
#cssdropdown, #cssdropdown ul { 
 
    list-style: none; 
 
    position: relative; 
 
    visibility: visible; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
} 
 
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; } 
 

 
/* Head links */ 
 
#cssdropdown li.headlink { 
 
    width: 11.911em; 
 
    float: left; 
 
    margin-left: -1px; 
 
    border: 1px black solid; 
 
    background-color: #e9e9e9; 
 
    text-align: center; 
 
} 
 
#cssdropdown li.headlink a { display: block; padding: 10px; } 
 

 
/* Child lists and links */ 
 
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; } 
 
#cssdropdown li.headlink:hover ul { display: block; } 
 
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;} 
 
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; } 
 

 
/* Pretty styling */ 
 
body { 
 
    font-family: verdana, arial, sans-serif; 
 
    font-size: 0.7em; 
 
    position: static; 
 
} 
 
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; } 
 
#cssdropdown li.headlink { background-color: #FFF50A; } 
 
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; } 
 

 
/*headermenu*/ 
 
#headerMenu { 
 
    position: relative; 
 
    float: left; 
 
    color: #DDD; 
 
    z-index: 1; 
 
    height: 34px; 
 
    right: 10px; 
 
    width: auto; 
 
}

<div align="left" class="thrColElsHdr" id="headerMenu"> 
 
    <ul id="cssdropdown" name="cssdropdown"> 
 
    <li class="headlink"> <a href="index.php?mode=ecole&page=histoire">Ecole</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=ecole&page=histoire">Histoire</a></li> 
 
     <li><a href="index.php?mode=ecole&page=philosophie">Philosophie</a></li> 
 
     <li><a href="index.php?mode=ecole&page=methode">M&eacute;thode</a></li> 
 
     <li><a href="index.php?mode=ecole&page=equipe">Equipe</a></li> 
 
     <li><a href="index.php?mode=ecole&page=qualite">Qualit&eacute;</a></li> 
 
     <li><a href="index.php?mode=ecole&page=service">Services</a></li> 
 
     <li><a href="index.php?mode=ecole&page=emploi">Emplois</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=cours&page=individuel">Cours</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=cours&page=individuel">Individuel</a></li> 
 
     <li><a href="index.php?mode=cours&page=semiprive">Semi-priv&eacute;</a></li> 
 
     <li><a href="index.php?mode=cours&page=minigroupe">Mini-groupe</a></li> 
 
     <li><a href="index.php?mode=cours&page=intensif">Intensif</a></li> 
 
     <li><a href="index.php?mode=cours&page=entreprise">Entreprises</a></li> 
 
     <li><a href="index.php?mode=cours&page=distance">A distance</a></li> 
 
     <li><a href="index.php?mode=cours&page=telephone">Par t&eacute;l&eacute;phone</a></li> 
 
     <li><a href="index.php?mode=cours&page=coaching">Coaching</a></li> 
 
     <li><a href="index.php?mode=cours&page=scolaire">Soutien scolaire</a></li> 
 
     <li><a href="index.php?mode=cours&page=diplome">Dipl&ocirc;mes officiels</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=inscription&page=formulaire">Inscription</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=inscription&page=evaluation">Auto-&eacute;valuation</a></li> 
 
     <li><a href="index.php?mode=inscription&page=condition">Conditions</a></li> 
 
     <li><a href="index.php?mode=inscription&page=tarif">Tarifs</a></li> 
 
     <li><a href="index.php?mode=inscription&page=formulaire">Formulaires</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=contact&page=ecole">Contact</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=contact&page=ecole">Ecole</a></li> 
 
     <li><a href="index.php?mode=contact&page=lien">Lien externe</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div><br/>

Answer 1

Sie sollten die Mindestbreite für das Element festlegen, das das Menü enthält.

Answer 2

Sie die CSS verwenden

white-space:nowrap; 

sollte

an die Mutter Ihres Menüs angewendet werden

, wenn Sie einen Teil der tatsächlichen html bieten, kann ich

zum Beispiel

<div class='menuContainer'> 
    <span>menu1</span> 
    <span>menu2</span> 
    <span>menu3</span> 
    <span>menu4</span> 
</div> 

und CSS wie

.menuContainer { 
    white-space:nowrap; 
} 

siehe http://www.w3schools.com/css/pr_text_white-space.asp

bearbeiten in Reaktion spezifischer sein auf Frageänderungen

I angenommen #cssdropdown ist die ID, die Ihr Container um alle Menüs enthält. Bitte lassen Sie mich den HTML-Code dafür wissen, wenn er nicht korrekt ist.

Anyways, in diesem Fall sollten Sie

#cssdropdown { 
    white-space:nowrap; 
} 

Eine andere Anmerkung zu Ihrem CSS hinzufügen, sehe ich die Breite Ihrer mens eingestellt ist 11.911em. Wenn ich sehe, kann ich nur annehmen, dass Sie es auf genau die richtige Breite für welche Schriftart Sie haben. Denken Sie daran, dass Ihre Benutzer leicht unterschiedliche Schriftarten haben und plötzlich ist Ihre pixelgenaue Größe bedeutungslos. Design mit etwas mehr Flexibilität.

Answer 3

Klingt so, als ob Ihre width-Eigenschaft weder im HTML noch im CSS gesetzt ist.

Können Sie einen Beispielcode bereitstellen?