Bonjour,
J'ai voulu créer un menu déroulant pour mon site inernet. http://stmarcfoot.free.fr/
Le problème est qu'avec le navigateur IE7 les menus restent fixes.
Voici mon code css:
table {border-collapse:collapse; border:0; margin:0; padding:0;}
body {font-size:62.5%; font-family:verdana,arial,sans-serif; background-color:rgb(255,255,255)}
.menu {
white-space:nowrap /*IE hack*/;
float:left; width:720px;
text-align:center; color: rgb(255,255,255);
border:none; font-size:14px;
}
.menu ul {
list-style-type:none;
}
.menu ul li {
float:left;
z-index:auto !important /*Non-IE6*/;
z-index:1000 /*IE6*/;
}
.menu ul li a {
float: none !important /*Non-IE6*/;
float:left /*IE-6*/; display:block;
padding-left:26px;
padding-right: 26px;
height:1.9em;
line-height:1.75em;
text-decoration:none;
font-weight:bold;
color: rgb(255,255,255);
}
.menu ul li ul {
display:none;
border:none;
}
/*------------------------------------Non-IE6 hovering------------------------------------*/
.menu ul li:hover {
position:relative;
}
.menu ul li:hover a {
background-image: url('images/menu/sousmenu.png');
text-decoration:none;
}
.menu ul li:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:1.85em;
margin-top:0.1em;
left:0;
}
.menu ul li:hover ul li a {
white-space:normal;
display:block;
width:11em;
height:auto;
line-height:18px;
margin-left:-1px;
padding:4px 20px 4px 20px;
border-left:solid 1px rgb(255,255,255);
border-top:solid 1px rgb(255,255,255);
border-bottom: solid 1px rgb(255,255,255);
background-image: url('images/menu/sousmenu.png');
font-weight:normal;
color:rgb(255,255,255);
}
.menu ul li:hover ul li a:hover {
background-image: url('images/menu/sousmenu_inv.png');
text-decoration:none;
}
/*-----------------------------------IE6 hovering--------------------------------*/
.menu table {
position:absolute;
top:0; left:0;
border-collapse:collapse;
}
.menu ul li a:hover {
position:relative /*IE hack*/;
z-index:1000 /*IE hack*/;
background-image: url('images/menu/sousmenu.png');
text-decoration:none;
}
.menu ul li a:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:1.5em;
left:0;
margin-top:0.1em;
}
.menu ul li a:hover ul li a {
white-space:normal;
display:block;
width:10.0em;
height:1px;
line-height:1.3em;
margin-left:-1px;
padding:4px 20px 4px 20px;
border-left:solid 1px rgb(255,255,255);
border-top:solid 1px rgb(255,255,255);
border-bottom: solid 1px rgb(255,255,255);
background-image: url('images/menu/sousmenu.png');
font-weight:normal;
color:rgb(255,255,255);
}
.menu ul li a:hover ul li a:hover {
background-image: url('images/menu/sousmenu_inv.png');
text-decoration:none;
}
@media print {.menu {float:left; width:800px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}
Pour le HTML:
<div class="menu">
<!-- un menu de navigation -->
<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Equipes<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/equipes/seniors.htm">Seniors</a></li>
<li><a href="pages/equipes/feminines.htm">Féminines</a></li>
<li><a href="pages/equipes/18.htm">18ans</a></li>
<li><a href="pages/equipes/15.htm">15ans</a></li>
<li><a href="pages/equipes/13.htm">13ans</a></li>
<li><a href="pages/equipes/Benjamins.htm">Benjamins</a></li>
<li><a href="pages/equipes/Poussins.htm">Poussins</a></li>
<li><a href="pages/equipes/Debutants.htm">Débutants</a></li>
<li><a href="pages/equipes/Loisirs.htm">Loisirs</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Convocations<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/Convocations/Seniors.pdf">Seniors</a></li>
<li><a href="pages/Convocations/15ans.pdf">15ans</a></li>
<li><a href="pages/Convocations/13ans.pdf">13ans</a></li>
<li><a href="pages/Convocations/Benjamins.pdf">Benjamins</a></li>
<li><a href="pages/Convocations/Poussins.pdf">Poussins</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li><a href="pages/contacts.htm">Contacts</a></li>
</ul>
<ul>
<li><a href="pages/historique.htm">Historique</a></li>
</ul>
<ul>
<li><a href="#">Autres<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/charte.htm">Charte</a></li>
<li><a href="pages/Entrainements.html">Entraînements</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Liens<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.fff.fr/">FFF</a></li>
<li><a href="http://foot44.fff.fr/cg/0601/www/actualite/index.shtml">District</a></li>
<li><a href="http://www.mairie-saintnazaire.fr/">Ville de St-Nazaire</a></li>
<li><a href="http://stmarcfoot-feminines.skyrock.com/">Blog des Féminines</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
