Выпадающее меню при изменении размера браузера

Question

Я делаю горизонтальное выпадающее меню. Это выглядит так:

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

Но когда я изменяю размер своего браузера (меняю его ширину), появляется меню:

[menu1][menu2]

[menu3][menu4]

Я хочу, чтобы он все время оставался в очереди!

РЕДАКТИРОВАТЬ: мой файл 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

Вы должны установить min-width для элемента, содержащего меню.

Answer 2

вы хотите использовать CSS

white-space:nowrap;

это должно применяться к родителю вашего меню

если вы предоставите некоторые из фактических HTML, я могу быть более конкретным

например

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

и css как

.menuContainer {
    white-space:nowrap;
}

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

Редактировать в ответ на изменения в операционном вопросе

I Предположим, #cssdropdown - это идентификатор вашего контейнера во всех меню. пожалуйста, дайте мне знать HTML для этого, если это не правильно.

В любом случае, в этом случае вы должны добавить в свой CSS

#cssdropdown {
    white-space:nowrap;
}

Еще одно замечание. Я вижу, что ширина ваших людей установлена ​​в 11,911em. Когда я вижу, что могу только предположить, что вы установили точно правильную ширину для любого имеющегося шрифта. имейте в виду, что у ваших пользователей могут быть немного другие шрифты, и внезапно ваш идеальный размер пикселя теряет смысл. дизайн с большей гибкостью.

Answer 3

Похоже, ваше свойство width не задано ни в HTML, ни в CSS.

Можете ли вы предоставить пример кода?