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
voici mon code CSS
et voici le contenu du fichier javascript
Merci d'avance
Modifié le 17 Dec 2004 - 13:38
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
Modifié le 17 Dec 2004 - 13:38