Bonjour,
j'ai un petit problème par rapport à mon menu déroulant.Sous firefox le menu est niquel alors que sous IE les listes des boutons ne s'affichent pas. (je me suis basé sur le menu déroulant proposé sur le site du zéro)
Auriez-vous une idée? je vous donne mon code :
<gras><souligne>page html (menu.html) : </souligne></gras>
<html>
<head>
<link href="stylemenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1"><a href="index.php"><img src="image/menu/menuindex/menu1.jpg" /></a>
<ul>
<li><a href="ecole.php">Ecole</a></li>
<li><a href="formation1.php">Formation</a></li>
<li><a href="equipe.php">Equipe</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="diplomes.php">Diplômés</a></li>
<li><a href="debouches.php">Débouchés</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu2"><a href="entreprise.php"><img src="image/menu/menuindex/menu2.jpg"/></a>
<ul>
<li><a href="emploi.php">Emploi</a></li>
<li><a href="stage.php">Stage</a></li>
<li><a href="poleavenir.php">Pôle avenir</a></li>
<li><a href="juniorentreprise.php">Junior entreprise</a></li>
<li><a href="contactEntreprise.php">Contact</a></li>
<li><a href="entreprise.php">Les entreprise</a></li>
<li><a href="presse.php">Presse</a></li>
<li><a href="communication.php">Communication</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu3"><a href="films.php"><img src="image/menu/menuindex/menu3.jpg"/></a></div>
</li>
<li>
<div id="sousmenu4"><a href="inscription.php"><img src="image/menu/menuindex/menu4.jpg"/></a></div>
</li>
<li>
<div id="sousmenu5"><a href="bde.php"><img src="image/menu/menuindex/menu5.jpg"/></a></div>
</li>
<li>
<div id="sousmenu6"><a href="blog.php"><img src="image/menu/menuindex/menu6.jpg"/></a>
<ul>
<li><a href="ConsultBlog.php">Consulter</a></li>
<li><a href="CreerBlog.php">Créer</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
<gras><souligne>feuille de style (stylemenu.css) :</souligne></gras>
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 25px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}
#menu li /* Elements des listes */
{
float:left;
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
display:none;
background:none;
}
#menu ul a:hover
{
background:#957662;
color:white;
}
#menu li:hover ul, #menu li li:hover ul /* Sous-listes lorsque la souris passe sur un élément de liste */
{
left:auto;
min-height:0; /* Corrige un bug sous IE */
display:block;
}
#sousmenu1
{
position: absolute; top: 408px; left: 188px;
}
#sousmenu1 li a:hover
{
width:169px;
}
#sousmenu1 li
{
width:169px;
border:0;
background:#383027;
}
#menu #sousmenu1 ul
{
position:absolute;
top:-150px;
}
#sousmenu2
{
position: absolute; top: 408px; left: 370px;
}
#sousmenu2 li
{
width:120px;
background:#383027;
}
#menu #sousmenu2 ul
{
position:absolute;
top:-200px;
}
#sousmenu3
{
position: absolute; top: 408px; left: 518px;
}
#sousmenu4
{
position: absolute; top: 408px; left: 627px;
}
#sousmenu5
{
position: absolute; top: 408px; left: 783px;
}
#sousmenu6
{
position: absolute; top: 408px; left: 886px;
}
#sousmenu6 li
{
width:180px;
border:0;
background:#383027;
}
#sousmenu6 li a:hover
{
width:180px;
}
#menu #sousmenu6 ul
{
position:absolute;
top:-50px;
left:22px;
}
#sousmenu1 img, #sousmenu2 img, #sousmenu3 img, #sousmenu4 img, #sousmenu5 img, #sousmenu6 img
{
border-style:none;
}
j'ai un petit problème par rapport à mon menu déroulant.Sous firefox le menu est niquel alors que sous IE les listes des boutons ne s'affichent pas. (je me suis basé sur le menu déroulant proposé sur le site du zéro)
Auriez-vous une idée? je vous donne mon code :
<gras><souligne>page html (menu.html) : </souligne></gras>
<html>
<head>
<link href="stylemenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1"><a href="index.php"><img src="image/menu/menuindex/menu1.jpg" /></a>
<ul>
<li><a href="ecole.php">Ecole</a></li>
<li><a href="formation1.php">Formation</a></li>
<li><a href="equipe.php">Equipe</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="diplomes.php">Diplômés</a></li>
<li><a href="debouches.php">Débouchés</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu2"><a href="entreprise.php"><img src="image/menu/menuindex/menu2.jpg"/></a>
<ul>
<li><a href="emploi.php">Emploi</a></li>
<li><a href="stage.php">Stage</a></li>
<li><a href="poleavenir.php">Pôle avenir</a></li>
<li><a href="juniorentreprise.php">Junior entreprise</a></li>
<li><a href="contactEntreprise.php">Contact</a></li>
<li><a href="entreprise.php">Les entreprise</a></li>
<li><a href="presse.php">Presse</a></li>
<li><a href="communication.php">Communication</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu3"><a href="films.php"><img src="image/menu/menuindex/menu3.jpg"/></a></div>
</li>
<li>
<div id="sousmenu4"><a href="inscription.php"><img src="image/menu/menuindex/menu4.jpg"/></a></div>
</li>
<li>
<div id="sousmenu5"><a href="bde.php"><img src="image/menu/menuindex/menu5.jpg"/></a></div>
</li>
<li>
<div id="sousmenu6"><a href="blog.php"><img src="image/menu/menuindex/menu6.jpg"/></a>
<ul>
<li><a href="ConsultBlog.php">Consulter</a></li>
<li><a href="CreerBlog.php">Créer</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
<gras><souligne>feuille de style (stylemenu.css) :</souligne></gras>
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 25px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}
#menu li /* Elements des listes */
{
float:left;
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
display:none;
background:none;
}
#menu ul a:hover
{
background:#957662;
color:white;
}
#menu li:hover ul, #menu li li:hover ul /* Sous-listes lorsque la souris passe sur un élément de liste */
{
left:auto;
min-height:0; /* Corrige un bug sous IE */
display:block;
}
#sousmenu1
{
position: absolute; top: 408px; left: 188px;
}
#sousmenu1 li a:hover
{
width:169px;
}
#sousmenu1 li
{
width:169px;
border:0;
background:#383027;
}
#menu #sousmenu1 ul
{
position:absolute;
top:-150px;
}
#sousmenu2
{
position: absolute; top: 408px; left: 370px;
}
#sousmenu2 li
{
width:120px;
background:#383027;
}
#menu #sousmenu2 ul
{
position:absolute;
top:-200px;
}
#sousmenu3
{
position: absolute; top: 408px; left: 518px;
}
#sousmenu4
{
position: absolute; top: 408px; left: 627px;
}
#sousmenu5
{
position: absolute; top: 408px; left: 783px;
}
#sousmenu6
{
position: absolute; top: 408px; left: 886px;
}
#sousmenu6 li
{
width:180px;
border:0;
background:#383027;
}
#sousmenu6 li a:hover
{
width:180px;
}
#menu #sousmenu6 ul
{
position:absolute;
top:-50px;
left:22px;
}
#sousmenu1 img, #sousmenu2 img, #sousmenu3 img, #sousmenu4 img, #sousmenu5 img, #sousmenu6 img
{
border-style:none;
}
