Menu déroulant, lors du redimensionnement du navigateur

Question

Je fais un menu déroulant horizontal. Il ressemble à ceci:

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

Mais quand je remets à la côte (moins large) mon navigateur, le menu apparaît comme:

[menu1][menu2] 

[menu3][menu4] 

Je veux rester en ligne tout le temps!

EDIT: mon fichier CSS

/* 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

Vous devez définir min-width sur l'élément contenant le menu.

Answer 2

vous voulez utiliser le css

white-space:nowrap; 

cela devrait être appliqué au parent de vos menus

si vous fournissez une partie de la html réelle, je peux être plus précis

par exemple

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

et css comme

.menuContainer { 
    white-space:nowrap; 
} 

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

Modifier en réponse à op question modifications

I Supposons #cssdropdown est l'identifiant de votre conteneur autour de tous les menus. s'il vous plaît laissez-moi savoir le html pour cela si ce n'est pas correct.

Quoi qu'il en soit, dans ce cas, vous devez ajouter à votre css

#cssdropdown { 
    white-space:nowrap; 
} 

Une autre note, je vois la largeur de vos hommes est réglé sur 11.911em. Quand je vois que je ne peux que supposer que vous définissez à exactement la bonne largeur pour la police que vous avez. gardez à l'esprit que vos utilisateurs peuvent avoir des polices légèrement différentes et soudainement votre taille parfaite de pixel est vide de sens. concevoir avec un peu plus de flexibilité à l'esprit.

Answer 3

Il semble que votre propriété width ne soit pas définie dans le code HTML ou CSS.

Pouvez-vous fournir un exemple de code?