Css3 : transition sur un menu

Bonjour,

Je suis en train de tester les nouvelles possibilités de CSS3 et j'aimerais savoir comment il était possible de styler un menu pour avoir un affichage progressif.

Par exemple j'utilise ceci pour afficher des liens de manière progressive :

.sousMenu a{ color: #999; -moz-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; }
.sousMenu a:hover{ color: #FF4692;  }

mais je ne trouve pas de solution pour styler mon menu...

.sousMenu { position: absolute; top: 30px; left: 1px; z-index: 9999; display: none;  }
li:hover .sousMenu  { display: block; }

Existe-t-il un moyen en utilisant CSS3 d'avoir un affichage progressif sur li:hover .sousMenu

Merci à tous

Bon fallait simplement installer le navigateur adéquat

pan a écrit :
Bon fallait simplement installer le navigateur adéquat

Oui, les transitions fonctionnent sous Chrome 9+, Safari 5+, Firefox 4+ et Opera 11 (et IE10).
Si tu étais sous Firefox 3.6, elles n'étaient pas encore prises en compte.

Tu aussi intérét à utiliser les css3 sans extensions propriétaires, et aussi celle d'Opera si elles sont dispo.

Patidou a écrit :
Tu aussi intérét à utiliser les css3 sans extensions propriétaires, et aussi celle d'Opera si elles sont dispo.

Oui c'est pour ça que je fais :

transition: color 0.3s ease;

Sinon quelqu'un sait-il si on peut appliquer ce genre d'effet à "display" ?

pan a écrit :
Sinon quelqu'un sait-il si on peut appliquer ce genre d'effet à "display" ?

Non. Sauf exception (visibility par ex.), cela ne s'applique qu'aux propriétés munies de valeurs numériques, pas sur des mots-clés.

Voici la liste :
background-color
margin-left
background-position
margin-right
border-bottom-color
margin-top
border-bottom-width
max-height
border-color
max-width
border-left-color
min-height
border-left-width
min-width
border-right-color
opacity
border-right-width
outline-color
border-spacing
outline-offset
border-top-color
outline-width
border-top-width
padding-bottom
border-width
padding-left
bottom
padding-right
clip
padding-top
color
right
crop
text-indent
font-size
text-shadow
font-weight
top
grid-*
vertical-align
height
visibility
left
width
letter-spacing
word-spacing
line-height
z-index
margin-bottom