Bonjour à tous et merci de me lire. J'ai planché toute la matinée sur un problème qui commence fortement à m'agacer alors voici :
Je veux faire un menu déroulant en CSS. Le résultat fontionne impécablement sous Firefox mais comme d'habitude IE fait des siennes. A savoir que mes sous-menu sont plus larges que mes menus, et que du coup, IE modifie la taille (largeur) d'un menu quand j'ouvre un sous-menu. Pas chouette, je n'arrive pas à l'en empêcher (si seulement le max-width pouvait marcher...)
Alors voici mon code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head> <title>Menu déroulant horizontal</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"src="menu.js"></script> <link rel="stylesheet" type="text/css" href="style_menu_top.css" /> </head> <body> <div id="menu"> <dl> <dt onmouseover="montre();"><a href="#">Accueil</a></dt> </dl> <dl> <dt onmouseover="montre('smenu1');"><a href="#">Societe</a></dt> <dd style="display: none;" id="smenu1"> <ul> <li><a href="#">Présentation de la société</a></li> <li><a href="#">Dates clefs</a></li> <li><a href="#">Dirigeants</a></li> <li><a href="#">Partenariats</a></li> <li><a href="#">Recrutement</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="montre('smenu2');"><a href="#">Solutions</a></dt> <dd style="display: none;" id="smenu2"> <ul> <li><a href="#">Organiser vos projets</a></li> <li><a href="#">Concevoir pour JAVA</a></li> <li><a href="#">Mieux développer en JAVA</a></li> <li><a href="#">Déployer et optimiser vos projets</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="montre('smenu3');"><a href="#">Formation</a></dt> <dd style="display: none;" id="smenu3"> <ul> <li><a href="#">Atouts de Entreprise</a></li> <li><a href="#">ingénierie de formation</a></li> <li><a href="#">Liste des formations</a></li> <li><a href="#">Calendrier des formations</a></li> <li><a href="#">Centre de formation</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="montre('smenu4');"><a href="#">Services</a></dt> <dd style="display: none;" id="smenu4"> <ul> <li><a href="#">Conseil</a></li> <li><a href="#">Projets</a></li> <li><a href="#">Régie spécialisée</a></li> <li><a href="#">Formation</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="montre('smenu5');"><a href="#">Technologies</a></dt> <dd style="display: none;" id="smenu5"> <ul> <li><a href="#">Eclipse et WSAD</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Framework Borneo</a></li> <li><a href="#">Framework Struts</a></li> <li><a href="#">Migration VisualAge/WSAD</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="montre();"><a href="#">Clients</a></dt> </dl> <dl> <dt onmouseover="montre();"><a href="#">Contact</a></dt> </dl> </div> </body> </html>
voici mon code CSS
body { margin: 0; padding: 0; font-family : verdana,helvetica; font-size : 11px; background:url(banner_entreprise.gif) top left no-repeat; } dl, dt, dd, ul , li{ margin: 0; padding: 0; } ul{ padding-left:15px; } #menu { position:absolute; top:60px; right:20px; z-index:100; /* Pour que les boîtes puissent aller par-dessus le texte d'en dessous */ } #menu dl { float: left; width: 100px; /* sous IE il n'est pas toujours respecté (s'agrandit !!)*/ border-top:solid #333399; border-top-width:10px; } #menu dl dt { cursor: pointer; text-align: center; border: solid blue; border-width:0px; border-right-width:1px; margin: 1px; } #menu dl dt a{ color:#364B9D; font-weight: bold; font-variant:small-caps; } #menu dl dd a{ color:#364B9D; font-size:11px; font-weight:bold; } #menu dl dt a:hover, #menu dl dd a:hover{ color:#EF5200; /* orange */ } #menu dl dd { display: none; border: 1px solid #EF5200; /* orange */ width:200px; /* C'est ici que ça fait bugger IE en lui faisant élargir ses boîtes */ padding:5px; margin-top:5px; } #menu dl dd ul li { text-align: left; list-style-type:square; height:100%; } #menu dl dd ul li a, #menu dl dt a { text-decoration: none; display: block; }
et voici le contenu du fichier javascript
function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=5; i++) { if (document.getElementById('smenu'+i)) { document.getElementById('smenu'+i).style.display='none'; } } if (d) {d.style.display='block';} }
Merci d'avance
