bonjour
Suivant l'exemple de ce menu : http://css.alsacreations.com/xmedi [...] smenu3.htm, j'ai créé un menu déroulant horizontal.
Vous pouvez le voir ici : http://www.koama.com/makoa/
Sous firefox, il marche sans problème.
Sous IE, lorsque je pointe sur un élément du menu, le sous-menu s'affiche verticalement. Et à ce moment, lorsque je pointe sur l'endroit où devrait être le sous-menu, il s'affiche comme je voudrais. En plus, quand on est dans les premiers sous-menus ça fait juste ça, mais quand on va dans les sous-menus vers la droite, les sous-menus reviennent à la ligne. C'est pas facile à expliquer, alors vous pouvez aller voir 
Voici mon code HTML :
Code :
- <div id="menuprincipal">
- <ul>
- <li><a href="#" class="menu-on" onmouseover="montrerMenu('')">Sommaire</a></li>
- <li><a href="#" onmouseover="montrerMenu('ssmenu1')">MAKOA</a>
- <ul id="ssmenu1" style="visibility:hidden" >
- <li><a href="#" >L'approche</a></li>
- <li><a href="#" >Les produits</a></li>
- </ul>
- </li>
- <li><a href="#" onmouseover="montrerMenu('ssmenu2')">Entreprises</a>
- <ul id="ssmenu2" style="visibility:hidden" >
- <li><a href="#" >France Telecom</a></li>
- <li><a href="#" >Huguet</a></li>
- <li><a href="#" >Kelchoix</a></li>
- <li><a href="#" >Références</a></li>
- </ul>
- </li>
- <li><a href="#" onmouseover="montrerMenu('ssmenu3')">Editeurs</a>
- <ul id="ssmenu3" style="visibility:hidden" >
- <li><a href="#" >Editions Bayard</a></li>
- <li><a href="#" >Magazine Elle</a></li>
- <li><a href="#" >Références</a></li>
- <li><a href="#" >Editions Larousse</a></li>
- </ul>
- </li>
- <li><a href="#" onmouseover="montrerMenu('ssmenu4')">Institutions</a>
- <ul id="ssmenu4" style="visibility:hidden" >
- <li><a href="#" >KOAMA</a></li>
- <li><a href="#" >CESR</a></li>
- <li><a href="#" >Uffeb</a></li>
- <li><a href="#" >Références</a></li>
- </ul>
- </li>
- <li><a href="#" onmouseover="montrerMenu('ssmenu5')">Contactez-nous</a>
- </li>
- </ul>
- </div>
|
mon code JS :
Code :
- function montrerMenu(id) {
- var d = document.getElementById(id);
- for (var i = 1; i<=10; i++) {
- if (document.getElementById('ssmenu'+i)) {
- //document.getElementById('ssmenu'+i).style.display = 'none';
- document.getElementById('ssmenu'+i).style.visibility = 'hidden';
- }
- }
- if (d) {
- d.style.visibility = 'visible';
- }
- }
|
Et mon CSS :
Code :
- #menuprincipal {
- clear: both;
- padding-left: 10px;
- text-align: center;
- margin: 0;
- padding: 0;
- height: 55px;
- position: relative;
- }
- #menuprincipal ul {
- margin: 0;
- padding: 0;
- }
- #menuprincipal li {
- list-style-type: none;
- margin: 0 2px 0 0;
- display: block;
- float: left;
- }
- /*
- * Liens
- */
- #menuprincipal a {
- display: block;
- width: 110px;
- text-align: left;
- padding: 2px;
- border: 1px solid #638D89;
- border-left-width: 8px;
- }
- /*
- * Sous-menus
- */
- #menuprincipal ul li ul {
- list-style-type: none;
- position: absolute;
- top: 30px;
- left: 0;
- }
- #menuprincipal ul li ul li {
- list-style-type: none;
- display: inline;
- }
- #menuprincipal ul li ul li a {
- display: block;
- float: left;
- border-width: 1px;
- width: 117px;
- }
|
Est-ce que vous verriez pourquoi IE affiche mal mes sous-menus ?
Merci !
Message édité par cosmoschtroumpf le 09-12-2005 à 10:35:10
---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
