调整浏览器大小时的下拉菜单

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

编辑:我的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/>

3 个解决方案

#1

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

您应该在包含菜单的元素上设置min-width。

#2

you want to use the css

你想使用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

如果你提供一些实际的HTML,我可以更具体

for example

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

and css like

和css一样

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

我假设#cssdropdown是所有菜单周围的容器ID。如果不正确,请告诉我这个html。

Anyways, in this case, you should add to your css

无论如何,在这种情况下,你应该添加到你的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.

另外一点,我看到你的男装宽度设定为11.911em。当我看到我只能假设你将它设置为你所拥有的任何字体的正确宽度。请记住,您的用户可能会略有不同的字体,突然您的像素完美大小毫无意义。设计时要考虑更多的灵活性。

#3

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

听起来你的宽度属性没有在HTML或CSS中设置。

Can you provide some sample code?

你能提供一些示例代码吗?

#1