Tweet
Bonjour à tous,
Voici mon problème, j'ai créer un menu déroulant avec quelques propriétés CSS3 et notamment box-shadow et text-shadow. Sur Google Chrome cela marche très bien, cependant sur les anciennes versions d'IE le menu principal s'affiche sans les propriétés CSS3 (ça c'est normal) mais mes sous menus, eux, ne s'affichent pas du tout et je ne vois pas du tout pourquoi...
Vous pouvez tester si vous voulez : j'ai constaté le résultat en utilisant Chrome et IE8.
Voici l'adresse du site : www.scodijon.fr
Merci.
Au passage voici mon code css concernant le menu
Voici mon problème, j'ai créer un menu déroulant avec quelques propriétés CSS3 et notamment box-shadow et text-shadow. Sur Google Chrome cela marche très bien, cependant sur les anciennes versions d'IE le menu principal s'affiche sans les propriétés CSS3 (ça c'est normal) mais mes sous menus, eux, ne s'affichent pas du tout et je ne vois pas du tout pourquoi...
Vous pouvez tester si vous voulez : j'ai constaté le résultat en utilisant Chrome et IE8.
Voici l'adresse du site : www.scodijon.fr
Merci.
Au passage voici mon code css concernant le menu
Code PHP:
/* Menu déroulant */
#Menu ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#Menu li{
background : #ed1e24;
height : 40px;
padding : 0 7px;
float : left;
margin : 0 0px;
width : auto;
line-height : 30px;
text-transform : uppercase;
font-size : 14px;
font-weight : bold;
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;*/
-webkit-box-shadow:0 0 5px rgba(0,0,0,1),
0 -1px 0 rgba(255,255,255,1);
-moz-box-shadow:0 0 5px rgba(0,0,0,1),
0 -1px 0 rgba(255,255,255,1);
box-shadow:0 0 5px rgba(0,0,0,1),
0 -1px 0 rgba(255,255,255,1);
}
#Menu li:hover{
-webkit-box-shadow:1px 1px 5px black inset;
-moz-box-shadow:1px 1px 5px black inset;
box-shadow:1px 1px 5px black inset;
}
#Menu li a {
color : #fff;
padding : 0;
margin : 0;
line-height : 45px;
text-shadow:0px 1px 0px rgba(0,0,0,1);
}
#Menu li a:hover{
color : #000;
text-shadow:0px 1px 0px rgba(255,255,255,0.5);
}
/* Second niveau */
#Menu li ul{
position : absolute;
width : 210px;
font-size : 12px;
background-color : #ed1e24;
left : -999em ;/* "display : none" not seen by screen readers */
border :0;
margin-left : -1px;
margin : -4px;
}
#Menu li li, #Menu li li:first-child {
border : 0;
margin-bottom : -1px; /*iphone, ipad fix*/
}
#Menu li li a {
display : inline-block;
width : 230px;
border-top : 1px solid #fff;
height : 20px;
}
#Menu ul a:hover {
color: #000;
text-decoration: none;
}
#Menu ul a {
text-decoration: none;
background-color: #ed1e24;
}
/* 3ème niveau et plus */
#Menu li ul ul {
margin: -30px 230px 40px;
width : 120px;
}
#Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.sfhover ul ul, #Menu li.sfhover ul ul ul {
left: -999em;
}
#Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.sfhover ul, #Menu li li.sfhover ul, #Menu li li li.sfhover ul { /* nested under hovered items */
left: auto;
}
Commentaire