Dropdown menu, problem when resizing the browser

Question

Hi, 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!

Thank you for your help.
Michaël

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; }

EDIT2 : the html file :

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

and the CSS of the headerMenu :

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

Answer 1

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 2

Sounds like your width property isn't being set in either the HTML or the CSS.

Can you provide some sample code?

Answer 3

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