michel.pageperso crée

Bien entendu, nous récupérons le .css déjà utilisé et nous le modifions.
Malheureusement, à cette date, le résultat de ce travail n'est intéressant que sur Chrome. Sur les autres navigateurs, les effets sont plus ou moins visibles. Par exemple sur Firefox et Opéra, l'on ne voit pas les effets de perceptives lors du basculement des blocs sous-menus; je crois que cela vient du fait que les différents navigateurs gèrent différemment les nouvelles propriétés. Comme le résultat n'est pas entièrement satisfaisant, je me contente de vous donner le code utilisé et le résultat sur mon site d'exemple sans autres explications.
#menu{margin:2% auto;} #menu ul li{display:inline-block;margin:0 2%;padding:7px 0;width:170px; background:rgba(11,123,234,.8); background:-moz-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(122,188,255,.8)),color-stop(100%,rgba(11,123,234,.8))); background:-webkit-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); background:-o-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); border-radius:10px 10px 0 0; border:1px solid rgba(11,123,234,.5); box-shadow:2px 2px 6px rgba(64,150,238,.7); -webkit-perspective:200px; -moz-perspective:200px; -ms-perspective:200px; -o-perspective:200px; perspective:200px; } #menu ul li:hover{ background:rgba(11,123,234,1); background:-moz-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); background:webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(122,188,255,1)),color-stop(100%,rgba(11,123,234,1))); background:-webkit-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); background:-o-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); border-bottom:1px solid rgba(122,188,255,1); } #menu ul li a{display:block;font:700 2em 'Trebuchet MS', Verdana, Arial, Sans-Serif;text-align:center;text-transform:uppercase;color:#0C2770;text-shadow:-1px -1px 2px rgba(255,255,255,.6);} #menu ul li a:hover{color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.6);} #menu ul li ol li{position:absolute;margin-left:-1px;height:25px;line-height:1;border-radius:0;} #menu ul li ol li:nth-child(1){margin-top:-33px;opacity:0; -webkit-transform-origin:center top;-webkit-transition:all .1s linear .9s; -moz-transform-origin:center top;-moz-transition:all .1s linear .9s; -ms-transform-origin:center top;-ms-transition:all .1s linear .9s; -o-transform-origin:center top;-o-transition:all .1s linear .9s; transform-origin:center top;transition:all .1s linear .9s; } #menu ul li:hover ol li:nth-child(1){margin-top:7px;opacity:1; -webkit-transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -ms-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; transition:all .1s linear 0s; } #menu ul li ol li:nth-child(2){margin-top:7px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear .6s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear .6s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; } #menu ul li:hover ol li:nth-child(2){margin-top:47px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .1s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .1s; transform:rotateX(0deg);transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; } #menu ul li ol li:nth-child(3){margin-top:47px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear .3s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear .3s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; } #menu ul li:hover ol li:nth-child(3){margin-top:87px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .5s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .5s; transform:rotateX(0deg);transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; } #menu ul li ol li:nth-child(4){margin-top:87px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear 0s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear 0s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; } #menu ul li:hover ol li:nth-child(4){margin-top:127px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .9s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .9s; transform:rotateX(0deg);transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; } #menu ul li:hover ol li:last-child{border-radius:0 0 10px 10px;} #menu ul li ol li a{text-transform:none;font-weight:normal;font-size:1.5em;}

Si vous avez tout suivi, les effets de dépliage fonctionnaient uniquement sous Chrome. j'ai cherché longuement le pourquoi; et je crois avoir trouvé:
Pour réaliser ces effets, il me faut sélectionner chaque sous-menu individuellement et leurs appliquer des valeurs de transform: et de transition: différents. Pour cela j'utilise les sélecteurs :nth-child() et :last-child que j'applique au bloc > sous-menu, pour nous #menu ul li ol li:nth-child(...) et #menu ul li:hover ol li:nth-child(...)
Et c'est là le problème, sous Firefox, certaines propriétés CSS3 comme perspective: ne fonctionne pas sur une liste si imbriquée. J'ai du simplifier le bloc > menu de ma page .html...
Quand au code .css que j'ai appliqué (et que vous pouvez consulter plus bas), il est proche de celui créé précédemment sauf... et je ne sais pas pourquoi, que les sélecteurs cités plus haut ne fonctionnant pas, j'ai utilisé :nth-of-type(.) ce qui nous donne des bloc > #new_menu li ol:nth-of-type(.) et #new_menu li:hover ol:nth-of-type(.) c'est pas simple, mais ça marche... du moins sous Chrome et Firefox dernière version.
#new_menu{margin:2% auto;} #new_menu li,#new_menu li ol{display:inline-block;margin:0 2%;padding:10px 0;width:170px; background:rgba(11,123,234,.8); background:-moz-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(122,188,255,.8)),color-stop(100%,rgba(11,123,234,.8))); background:-webkit-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); background:-o-linear-gradient(top,rgba(122,188,255,.8) 0%,rgba(11,123,234,.8) 100%); border-radius:10px 10px 0 0; border:1px solid rgba(11,123,234,.5); box-shadow:2px 2px 6px rgba(64,150,238,.7); -webkit-perspective:170px; -moz-perspective:170px; -ms-perspective:170px; -o-perspective:170px; perspective:170px; } #new_menu li:hover,#new_menu li ol:hover{ background:rgba(11,123,234,1); background:-moz-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); background:webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(122,188,255,1)),color-stop(100%,rgba(11,123,234,1))); background:-webkit-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); background:-o-linear-gradient(top,rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); border-bottom:1px solid rgba(122,188,255,1); } #new_menu li a{display:block;font:700 1.5em 'Trebuchet MS', Verdana, Arial, Sans-Serif;text-align:center;text-transform:uppercase;color:#0C2770;text-shadow:-1px -1px 2px rgba(255,255,255,.6);} #new_menu li a:hover{color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.6);} #new_menu li ol{position:absolute;margin:0 0 0 -1px;padding:7px 0;border-radius:0;} #new_menu li ol:nth-of-type(1){margin-top:0px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear .6s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear .6s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear .6s, margin-top .3s linear .6s, opacity .3s linear .6s; } #new_menu li:hover ol:nth-of-type(1){margin-top:7px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .1s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .1s; transform:rotateX(0deg);transition:all .4s linear .1s, margin-top .1s linear 0s, opacity .4s linear .1s; } #new_menu li ol:nth-of-type(2){margin-top:7px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear .3s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear .3s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear .3s, margin-top .3s linear .3s, opacity .3s linear .3s; } #new_menu li:hover ol:nth-of-type(2){margin-top:47px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .5s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .5s; transform:rotateX(0deg);transition:all .4s linear .5s, margin-top .1s linear 0s, opacity .4s linear .5s; } #new_menu li ol:nth-of-type(3){margin-top:47px;opacity:0; -webkit-transform:rotateX(180deg);-webkit-transform-origin:center top;-webkit-transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; -moz-transform:rotateX(180deg);-moz-transform-origin:center top;-moz-transition:all .3s linear 0s; -ms-transform:rotateX(180deg);-ms-transform-origin:center top;-ms-transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; -o-transform:rotateX(180deg);-o-transform-origin:center top;-o-transition:all .3s linear 0s; transform:rotateX(180deg);transform-origin:center top;transition:all .3s linear 0s, margin-top .3s linear 0s, opacity .3s linear 0s; } #new_menu li:hover ol:nth-of-type(3){margin-top:87px;opacity:1; -webkit-transform:rotateX(0deg);-webkit-transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; -moz-transform:rotateX(0deg);-moz-transition:all .4s linear .9s; -ms-transform:rotateX(0deg);-ms-transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; -o-transform:rotateX(0deg);-o-transition:all .4s linear .9s; transform:rotateX(0deg);transition:all .4s linear .9s, margin-top .1s linear 0s, opacity .4s linear .9s; } #new_menu li:hover ol:last-child{border-radius:0 0 10px 10px;} #new_menu li ol a{text-transform:none;font-weight:normal;font-size:1.3em;}