css - 下拉菜单，调整浏览器大小时

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

您应该在包含菜单的元素上设置最小宽度。