Dropdown menu, when resizing the browser - css

Question

I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* 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"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>

Answer 1

You should set min-width on the element containing the menu.

Answer 2

you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.

Answer 3

Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?