我正在做一個水平下拉菜單。它看起來像這樣:下拉菜單,調整瀏覽器大小時
[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é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é</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é</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élé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ô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-é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/>
當我有:#cssdropdown {white-space:nowrap;},它沒有改變任何東西。對於寬度(11.911em),我會改變這一點,謝謝。 – 2009-06-25 15:36:10
我把它放在#header菜單中,它可以與Chrome3一起使用,但不能與IE7和Firefox3一起使用... – 2009-06-25 17:01:39