Yop!
Voilà j'ai un menu déroulant horizontal et les menus se superposent dans FireFox, alors qu'IE gère ca comme un grand!
-> en fait, normallement il y a une taille fixe pour la largeur des champs, mais vu que j'ai un menu "Produits & Services" qui nécessite + de place, j'ai agrandi ce champ ainsi que 2 autres, et une fois agrandi, ca se superpose...
Le site : http://www.duotone.ch/~bastien/applimed/
Code :
- <div id="menu">
- <dl>
- <dt onmouseover="montre('smenu1');"><a href="#">Accueil</a></dt>
- </dl>
- <dl>
- <dt class="menuMedium" onmouseover="montre('smenu2');"><a href="#">Entreprise</a></dt>
- <dd id="smenu2" class="menuMedium2">
- <ul>
- <li><a href="#">Historique</a></li>
- <li><a href="#">Présentation</a></li>
- </ul>
- </dd>
- </dl>
-
- <dl>
- <dt class="menuBig" onmouseover="montre('smenu3');"><a href="#">Produits & Services </a></dt>
- <dd id="smenu3" class="menuBig2">
- <ul>
- <li><a href="#">Applicateurs</a></li>
- <li><a href="#">Gants</a></li>
- <li><a href="#">Compresses</a></li>
- <li><a href="#">Boules</a></li>
- <li><a href="#">Sets</a></li>
- <li><a href="#">Accessoires</a></li>
- <li class="menuSpec"><a href="#">Services</a></li>
- </ul>
- </dd>
- </dl>
- <dl>
- <dt class="menuMedium" onmouseover="montre('smenu5');"><a href="#">Qualité</a></dt>
- <dd id="smenu5" class="menuMedium2">
- <ul>
- <li><a href="#">Certification ISO</a></li>
- <li><a href="#">Fabrication</a></li>
- </ul>
- </dd>
- </dl>
- <dl>
- <dt onmouseover="montre('smenu6');"><a href="#">Contact</a></dt>
- </dl>
- <dl>
- <dt onmouseover="montre('smenu7');"><a href="#">Liens</a></dt>
- </dl>
- </div>
|
Code :
- dl, dt, dd, ul, li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- #menu {
- position: absolute;
- margin-top: 96px;
- margin-left: 127px;
- z-index:100;
- width: 100%;
- }
- #menu dl {
- float: left;
- width: 80px;
- }
- .menuMedium {
- width: 120px;
- }
- .menuMedium2 {
- width: 119px;
- }
- .menuBig {
- width: 160px;
- }
- .menuBig2 {
- width: 159px;
- }
- #menu dt {
- cursor: pointer;
- text-align: center;
- font-weight: bold;
- border-right: 1px solid white;
- }
- #menu dd {
- border: 1px solid gray;
- }
- #menu li {
- text-align: left;
- padding-left: 5px;
- background: #fff;
- }
- #menu li a, #menu dt a {
- color: #000;
- text-decoration: none;
- display: block;
- height: 100%;
- border: 0 none;
- }
- #menu li a:hover, #menu dt a:hover {
- background: #eee;
- }
- .menuSpec {
- border-top: 1px solid gray;
- font-weight: bold;
- }
|
Si vous pouvez m'aider, merci bcp!
++