Bonjour,
Pour un site que je dois réaliser de toute urgence j'utilise un exemple de menu horizontal à plusieurs niveaux verticaux téléchargé à l'adresse suivante:
http://dosimple.ch/articles/Menus-dynamiques/
(c'est le menu horizontal)
sur IE 6 & 7 PC, mystère... le second niveau de menu vertical refuse obstinément de s'ouvrir, ce qui n'est pas le cas sous Mozilla Firefox & Apple Safari
Si qqn a une quelconque idée de ce qui peut être à l'origine de ce bug, des corrections ou ajouts qu'il faut faire, votre aide serait la bienvenue!
Vous pouvez voir le site temporairement sur http://www.fabspage.fr et une fois fini sur http://www.pavoifetes.com
Merci d'avance!
Fabien
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>C.i.P. Pavoifêtes</title>
<link href="css/pf.css" rel="stylesheet" type="text/css" />
<!-- script du menu -->
<script type="text/javascript" src="scripts/dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="scripts/browserdetect.js"></script>
<!-- script de l'anim -->
<script type="text/javascript" src="scripts/AC_RunActiveContent.js"></script>
</head>
<body>
<div id="logocontainer">
<table width="800" height="99" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="logogris" width="291"></td>
<td width="509"> </td>
</tr>
</table>
</div>
<div id="contenumenu">
<ul id="menu">
<li><a href="#" >L'ENTREPRISE</a> </li>
<li><a href="#">LE CATALOGUE 2008</a>
<ul id="submenu">
<li><a href="#">PAVOISEMENT</a>
<ul id="submenu">
<li><a href="#">National</a></li>
<li><a href="#">Provinces et régions</a></li>
<li><a href="#">Européen et mondial</a></li>
<li><a href="#">Evènementiel et publicitaire</a></li>
</ul>
</li>
<li><a href="#">DIVERS</a>
<ul id="submenu">
<li><a href="#">Banderoles et kakémonos</a></li>
<li><a href="#">Affichage et signalétique</a></li>
<li><a href="#">Structures pour visuels</a></li>
<li><a href="#">Porte-affiches et vitrines</a></li>
</ul>
</li>
<li><a href="#">GUIRLANDES, PETITS DRAPEAUX</a>
<ul id="submenu">
<li><a href="#">Guirlandes</a></li>
<li><a href="#">Drapeaux de table et à main</a></li>
</ul>
</li>
<li><a href="#">COLLECTIVITÉS</a>
<ul id="submenu">
<li><a href="#">Drapeaux de sociétés et d'assoc°</a></li>
<li><a href="#">Drapeaux et bannières brodés</a></li>
<li><a href="#">Médailles et décorations</a></li>
<li><a href="#">Inaugurations et cérémonies</a></li>
<li><a href="#">Écharpes et insignes</a></li>
<li><a href="#">Matériel électoral</a></li>
<li><a href="#">Pour les municipalités</a></li>
</ul>
</li>
<li><a href="#">SUPPORTS ET MÂTS</a>
<ul id="submenu">
<li><a href="#">Pieds pour drapeaux</a></li>
<li><a href="#">Supports muraux pour drapeaux</a></li>
<li><a href="#">Mâts aluminium et accessoires</a></li>
<li><a href="#">Mâts fibre de verre et accessoires</a></li>
<li><a href="#">Exposition et réception</a></li>
</ul>
</li>
<li><a href="#">SPORTS</a>
<ul id="submenu">
<li><a href="#">Signalisation sports et loisirs</a></li>
<li><a href="#">Fanions et adhésifs</a></li>
<li><a href="#">Ecussons et broderie</a></li>
<li><a href="#">Marquage textiles, etc</a></li>
<li><a href="#">Manifestations sportives</a></li>
<li><a href="#">Coupes, médailles et trophées</a></li>
<li><a href="#">Fêtes et manifestations</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contact.html" >CONTACT & COMMANDES</a></li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
<div id="contenu02">
</div>
</body>
</html>
Et voici mon code CSS:
@charset "UTF-8";
body {
margin: 0px;
background-image: url(../images/fondbody.gif);
background-repeat: repeat;
background-position: center;
}
#logocontainer {
height: 100px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/fondlogo.jpg);
background-repeat: repeat;
}
#logogris {
background-image: url(../images/logogris.png);
background-repeat: no-repeat;
background-position: left top;
height: 99px;
width: 291px;
}
#contenumenu {
width: 800px;
height: 21px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: fixe;
background-image: url(../images/fondmenucontenu.jpg);
}
/* CSS du menu horizontal, bieler batiste */
#menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:600px;
}
#menu ul{
position:absolute;
display:block;
width:200px;
/*margin:0;*/
margin-left:0;
padding:0;
}
#menu li ul{
visibility:hidden;
}
#menu li li ul{
position:absolute;
margin-left:200px;
margin-top:-15px;
visibility:hidden;
}
#menu li{
list-style:none;
width:200px;
height:auto;
display:inline;
display/**/:block;
float/**/:left;
margin:0;
padding:0;
}
#menu li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
#menu a{
display:block;
width:200px;
margin:0px;
padding:0px;
}
#menu a:hover {
background-color: #333333;
}
/*fin du CSS de menu de bieler batiste*/
#menu li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 21px;
font-weight: bold;
color: #333333;
text-decoration: none;
text-indent: 6px;
}
#menu li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 21px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-indent: 6px;
background-color: #333333;
}
#submenu {
/*Internet Explorer*/
filter: alpha(opacity=95);
/*Firefox*/
-moz-opacity: 0.95;
/*Safari*/
opacity: 0.95;
background-color: #A9A9A9;
}
#contenu02 {
height: auto;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
Configuration: Mac OS X
Firefox 2.0.0.14
Acheter mise à niveau windows 7
