Bonjour,
Sur un site géré avec Wordpress, j'ai fait un menu déroulant horizontal qui ne veut pas fonctionner avec IE7 à partir du deuxième niveau de menu, il n'affiche plus rien !
J'ai beau cherché et testé pas mal de choses, je n'arrive pas à les faire apparaître !
Et je pense que c'est principalement ce code CSS que IE7 ne comprend pas :
Si quelqu'un a une idée de ce qui ne va pas, ça fait longtemps que je ne suis pas restée bloquée sur ce genre de problème d'affichage avec IE aussi longtemps sans arriver à résoudre le problème !
Merci d'avance
Sur un site géré avec Wordpress, j'ai fait un menu déroulant horizontal qui ne veut pas fonctionner avec IE7 à partir du deuxième niveau de menu, il n'affiche plus rien !
J'ai beau cherché et testé pas mal de choses, je n'arrive pas à les faire apparaître !
<div id="sidebar">
<ul>
<li class="page_item page-item-6"><a href="url.html" title="École de voile">École de voile</a>
<ul>
<li class="page_item page-item-36"><a href="url.html" title="Stages Pâques et Été">Stages Pâques et Été</a>
<ul>
<li class="page_item page-item-110"><a href="url.html" title="5 / 7 ans">5 / 7 ans</a>
<ul>
<li class="page_item page-item-118"><a href="url.html" title="Stage Journée">Stage Journée</a></li>
<li class="page_item page-item-120"><a href="url.html" title="Stage Après-Midi">Stage Après-Midi</a></li>
</ul>
</li>
<li class="page_item page-item-112"><a href="url.html" title="7 / 9 ans">7 / 9 ans</a>
<ul>
<li class="page_item page-item-122"><a href="url.html" title="Stage Journée">Stage Journée</a>
<ul>
<li class="page_item page-item-212"><a href="url.html" title="Formule Optimist">Formule Optimist</a></li>
<li class="page_item page-item-213"><a href="url.html" title="Formule Découverte">Formule Découverte</a></li>
</ul>
</li>
<li class="page_item page-item-126"><a href="url.html" title="Stage Matin">Stage Matin</a></li>
<li class="page_item page-item-124"><a href="url.html" title="Stage Après-Midi">Stage Après-Midi</a></li>
</ul>
</li>
<li class="page_item page-item-114"><a href="url.html" title="10 / 13 ans">10 / 13 ans</a>
<ul>
<li class="page_item page-item-129"><a href="url.html" title="Stage Journée">Stage Journée</a></li>
<li class="page_item page-item-131"><a href="url.html" title="Stage Matin">Stage Matin</a></li>
<li class="page_item page-item-135"><a href="url.html" title="Stage Après-Midi">Stage Après-Midi</a></li>
<li class="page_item page-item-138"><a href="url.html" title="Stage Formule à la Carte">Stage Formule à la Carte</a></li>
</ul>
</li>
<li class="page_item page-item-116"><a href="url.html" title="14 / 18 ans">14 / 18 ans</a>
<ul>
<li class="page_item page-item-143"><a href="url.html" title="Stage Matin">Stage Matin</a></li>
<li class="page_item page-item-145"><a href="url.html" title="Stage Après-Midi">Stage Après-Midi</a></li>
<li class="page_item page-item-140"><a href="url.html" title="Stage Formule à la Carte">Stage Formule à la Carte</a></li>
</ul>
li>
<li class="page_item page-item-177"><a href="url.html" title="Calendrier des activités">Calendrier des activités</a></li>
</ul>
<li>
<li class="page_item page-item-42"><a href="url.html" title="Accueil de goupes">Accueil de goupes</a></li>
</ul>
</li>
<li class="page_item page-item-8 current_page_ancestor current_page_parent"><a href="url.html" title="Compétition">Compétition</a>
<ul>
<li class="page_item page-item-302"><a href="url.html" title="Rejoignez-nous !">Rejoignez-nous !</a></li>
<li class="page_item page-item-303 current_page_item"><a href="url.html" title="Manifestations sportives">Manifestations sportives</a></li>
<li class="page_item page-item-304"><a href="url.html" title="Résultats">Résultats</a></li>
</ul>
</li>
</ul>
</div>#sidebar {
display: block;
z-index: 5;
margin: -41px 0 0 0;
padding: 0;
bottom: 0;
}
#sidebar ul {
width:100%;
min-height: 41px;
list-style-type: none;
padding: 0;
margin: 0;
}
#sidebar li {
display: inline;
float: left;
min-height: 31px;
position: relative;
text-align: left;
}
#sidebar li ul, #sidebar li.page-item-2 ul {
width: auto;
height: auto;
top: 100%;
left: 0px;
border: solid 1px #3b3b3b;
}
#sidebar li ul li {
text-align: left;
height: auto;
min-height: 24px;
display: block;
}
#sidebar li a {
text-decoration: none;
color: #fff;
float: left;
height: 26px;
padding: 10px 7px 5px 5px;
margin: 0px 0px 0px 0px;
font-weight: bold;
background: url('images/border-menu.gif') no-repeat right center;
}
#sidebar li ul li a, #sidebar li ul li a:hover, #sidebar li.page-item-2 li a, #sidebar li.page-item-2 li a:hover {
background: url('images/blank.gif') no-repeat;
border-bottom: solid 1px #000;
border-top: solid 1px #605f5f;
padding: 5px 7px 5px 5px;
width: 160px;
height: 18px;
}
#sidebar li ul li a:hover, #sidebar li.page-item-2 li a:hover {
background: #242424;
}
#sidebar li li ul, #sidebar li.page-item-2 li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 172px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
display: none;
position: absolute;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
/* colors */
#sidebar {
color: #fff;
}
#sidebar h2 {
color: #fff;
}
#sidebar li.page-item-2 a {
background: url('images/back-accueil.gif') no-repeat left center;
}
#sidebar li.page-item-2 a:hover {
background: url('images/back-accueil-hover.gif') no-repeat left center;
}
#sidebar li.current_page_item a {
color: #fff;
background: url('images/back-accueil-hover.gif') no-repeat right center #242424;
}
#sidebar a:hover {
color: #fff;
background: url('images/back-menu-hover.gif') no-repeat right center #313131;
}
#sidebar ul li ul, #sidebar ul li ul ul {
border-left: solid 1px #3b3b3b;
border-right: solid 1px #3b3b3b;
border-bottom: solid 1px #3b3b3b;
}
#sidebar ul li ul {
background: #3b3b3b;
filter: Alpha(opacity=80);
-moz-opacity : 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#sidebar ul li ul li ul {
background: #3b3b3b;
filter: Alpha(opacity=100);
-moz-opacity : 1;
-khtml-opacity: 1;
opacity: 1;
}
Et je pense que c'est principalement ce code CSS que IE7 ne comprend pas :
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
display: none;
position: absolute;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}Si quelqu'un a une idée de ce qui ne va pas, ça fait longtemps que je ne suis pas restée bloquée sur ce genre de problème d'affichage avec IE aussi longtemps sans arriver à résoudre le problème !
Merci d'avance