bonjour a vous
l'exemple ci dessous marche tres bien avec firefox 3 mais pas avec ie7.
le menu principal s'affiche bien sur la longueur de l'ecran, mais pas les sous menu
A priori probleme de z-index mais je ne sais pas ou
si quelqu'un a une solution?
Le site est pas en ligne
merci d'avance
-----------------------------------------------
code CSS :
#outside{
border:1px solid #000099;
background:#000099;
}
#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#000099;
color:#ffffff;
width:148px;
height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#0066FF;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #000099;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#0066FF;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000099;
border-left:1px solid #000099;
background:#ffffff;
z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
-------------------------------------------
code html
<link href="menu/menu_style.css" rel="stylesheet" type="text/css">
<body>
<p><img src="Images/LogoSYB.png" alt="" width="237" height="90" align="absmiddle"></p>
<div id="outside">
<ul id="navigation-1">
<li><a href="" title="Découvrez le SYB" target="_self" >Decouvrez le SYB</a>
<ul class="navigation-2">
<li><a href="inscription.htm" title="Inscirption" target="_self" >Inscirption</a></li>
<li><a href="horaires.htm" title="Les horaires" target="_self" >Les horaires</a></li>
<li><a href="responsables.htm" title="Les responsables" target="_self" >Les responsables</a></li>
</ul>
</li>
<li><a href="" title="La vie du club" target="_self" >La vie du club</a>
<ul class="navigation-2">
<li><a href="jeunes.htm" title="Nos jeunes" target="_self" >Nos jeunes</a></li>
<li><a href="evenements.htm" title="Evenements" target="_self" >Evenements</a></li>
<li><a href="presse.htm" title="Revue de presse" target="_self" >Revue de presse</a></li>
<li><a href="partenaires.htm" title="Partenaires" target="_self" >Partenaires</a></li>
<li><a href="coups.htm" title="Les coups du SYB" target="_self" >Les coups du SYB</a></li>
<li><a href="liens.htm" title="Liens utiles" target="_self" >Liens utiles</a></li>
</ul>
</li>
<li><a href="" title="Les compétitions" target="_self" >Les competitions</a>
<ul class="navigation-2">
<li><a href="departementales.htm" title="Departementales" target="_self" >Departementales</a></li>
<li><a href="regionales.htm" title="Regionales" target="_self" >Regionales</a></li>
<li><a href="tournois.htm" title="Tournois individuels" target="_self" >Tournois individuels</a></li>
</ul>
</li>
<li><a href="" title="Galerie de photos" target="_self" >Galerie de photos</a>
<ul class="navigation-2">
<li><a href="loisirs2008.htm" title="Loisirs/Confirmes 2008" target="_self" >Loisirs/Confirmes 2008</a></li>
<li><a href="syb2007.htm" title="Tournoi SYB 2007" target="_self" >Tournoi SYB 2007</a></li>
<li><a href="coupe2007.htm" title="Coupe de Charente 2007" target="_self" >Coupe de Charente 2007</a></li>
<li><a href="interne2006.htm" title="Tournoi interne 2006" target="_self" >Tournoi interne 2006</a></li>
<li><a href="coupe2006.htm" title="Coupe de Charente 2006" target="_self" >Coupe de Charente 2006</a></li>
<li><a href="rochefort2006.htm" title="Rochefort 2006" target="_self" >Rochefort 2006</a></li>
<li><a href="syb2006.htm" title="Tournoi SYB 2006" target="_self" >Tournoi SYB 2006</a></li>
<li><a href="niort2006.htm" title="Niort 2006" target="_self" >Niort 2006</a></li>
<li><a href="subquotidien.htm" title="Le SYB au quotidien" target="_self" >Le SYB au quotidien</a></li>
</ul>
</li>
<li><a href="" title="La pratique du BAD" target="_self" >La pratique du BAD</a>
<ul class="navigation-2">
<li><a href="regles.htm" title="Les regles" target="_self" >Les regles</a></li>
<li><a href="classement.htm" title="Le classement" target="_self" >Le classement</a></li>
<li><a href="savoir.htm" title="Le saviez-vous ?" target="_self" >Le saviez-vous ?</a></li>
</ul>
</li>
</ul>
</div>
</body>>
l'exemple ci dessous marche tres bien avec firefox 3 mais pas avec ie7.
le menu principal s'affiche bien sur la longueur de l'ecran, mais pas les sous menu
A priori probleme de z-index mais je ne sais pas ou
si quelqu'un a une solution?
Le site est pas en ligne
merci d'avance
-----------------------------------------------
code CSS :
#outside{
border:1px solid #000099;
background:#000099;
}
#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#000099;
color:#ffffff;
width:148px;
height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#0066FF;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #000099;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#0066FF;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000099;
border-left:1px solid #000099;
background:#ffffff;
z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
-------------------------------------------
code html
<link href="menu/menu_style.css" rel="stylesheet" type="text/css">
<body>
<p><img src="Images/LogoSYB.png" alt="" width="237" height="90" align="absmiddle"></p>
<div id="outside">
<ul id="navigation-1">
<li><a href="" title="Découvrez le SYB" target="_self" >Decouvrez le SYB</a>
<ul class="navigation-2">
<li><a href="inscription.htm" title="Inscirption" target="_self" >Inscirption</a></li>
<li><a href="horaires.htm" title="Les horaires" target="_self" >Les horaires</a></li>
<li><a href="responsables.htm" title="Les responsables" target="_self" >Les responsables</a></li>
</ul>
</li>
<li><a href="" title="La vie du club" target="_self" >La vie du club</a>
<ul class="navigation-2">
<li><a href="jeunes.htm" title="Nos jeunes" target="_self" >Nos jeunes</a></li>
<li><a href="evenements.htm" title="Evenements" target="_self" >Evenements</a></li>
<li><a href="presse.htm" title="Revue de presse" target="_self" >Revue de presse</a></li>
<li><a href="partenaires.htm" title="Partenaires" target="_self" >Partenaires</a></li>
<li><a href="coups.htm" title="Les coups du SYB" target="_self" >Les coups du SYB</a></li>
<li><a href="liens.htm" title="Liens utiles" target="_self" >Liens utiles</a></li>
</ul>
</li>
<li><a href="" title="Les compétitions" target="_self" >Les competitions</a>
<ul class="navigation-2">
<li><a href="departementales.htm" title="Departementales" target="_self" >Departementales</a></li>
<li><a href="regionales.htm" title="Regionales" target="_self" >Regionales</a></li>
<li><a href="tournois.htm" title="Tournois individuels" target="_self" >Tournois individuels</a></li>
</ul>
</li>
<li><a href="" title="Galerie de photos" target="_self" >Galerie de photos</a>
<ul class="navigation-2">
<li><a href="loisirs2008.htm" title="Loisirs/Confirmes 2008" target="_self" >Loisirs/Confirmes 2008</a></li>
<li><a href="syb2007.htm" title="Tournoi SYB 2007" target="_self" >Tournoi SYB 2007</a></li>
<li><a href="coupe2007.htm" title="Coupe de Charente 2007" target="_self" >Coupe de Charente 2007</a></li>
<li><a href="interne2006.htm" title="Tournoi interne 2006" target="_self" >Tournoi interne 2006</a></li>
<li><a href="coupe2006.htm" title="Coupe de Charente 2006" target="_self" >Coupe de Charente 2006</a></li>
<li><a href="rochefort2006.htm" title="Rochefort 2006" target="_self" >Rochefort 2006</a></li>
<li><a href="syb2006.htm" title="Tournoi SYB 2006" target="_self" >Tournoi SYB 2006</a></li>
<li><a href="niort2006.htm" title="Niort 2006" target="_self" >Niort 2006</a></li>
<li><a href="subquotidien.htm" title="Le SYB au quotidien" target="_self" >Le SYB au quotidien</a></li>
</ul>
</li>
<li><a href="" title="La pratique du BAD" target="_self" >La pratique du BAD</a>
<ul class="navigation-2">
<li><a href="regles.htm" title="Les regles" target="_self" >Les regles</a></li>
<li><a href="classement.htm" title="Le classement" target="_self" >Le classement</a></li>
<li><a href="savoir.htm" title="Le saviez-vous ?" target="_self" >Le saviez-vous ?</a></li>
</ul>
</li>
</ul>
</div>
</body>>
,