Menu spirale 3

Les sous-menus:

.submenu {left: 0; max-height: 0; position: absolute; top: 100%; z-index: 0; perspective: 400px;}
.submenu li {opacity: 0; height:6vh; line-height:6vh; transform: rotateY(90deg); transition: opacity .4s, transform .5s;}
.menu .submenu li:hover a {border-left: 0.2vh solid #005700; border-right: 0.2vh solid #005700; border-bottom: 0.2vh solid #005700; color: #ffffff;line-height:6vh;}
.menu > li:hover .submenu, .menu > li:focus .submenu {max-height: 50vw; z-index: 10;}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {opacity: 1; transform: none;}

Position et perspective pour l'animation.

Hauteur: 6% de la hauteur écran; centrage vertical du texte; rotation 90deg; vitesse animation: opacité:0.4 seconde et translation: 0.5 seconde.

Au survol: bordures, positionnement texte, couleur.

Au survol: agrandissement pour faire apparaître les sous menus.

*****************

L'effet spirale:

.menu li:hover .submenu li:nth-child(1) {transition-delay: 0s;}
.menu li:hover .submenu li:nth-child(2) {transition-delay: 50ms;}
.menu li:hover .submenu li:nth-child(3) {transition-delay: 100ms;}
.menu li:hover .submenu li:nth-child(4) {transition-delay: 150ms;}
.menu li:hover .submenu li:nth-child(5) {transition-delay: 200ms;}
.menu li:hover .submenu li:nth-child(6) {transition-delay: 250ms;}
.menu li:hover .submenu li:nth-child(7) {transition-delay: 300ms;}
.menu li:hover .submenu li:nth-child(8) {transition-delay: 350ms;}

.submenu li:nth-child(1) {transition-delay: 350ms;}
.submenu li:nth-child(2) {transition-delay: 300ms;}
.submenu li:nth-child(3) {transition-delay: 250ms;}
.submenu li:nth-child(4) {transition-delay: 200ms;}
.submenu li:nth-child(5) {transition-delay: 150ms;}
.submenu li:nth-child(6) {transition-delay: 100ms;}
.submenu li:nth-child(7) {transition-delay: 50ms;}
.submenu li:nth-child(8) {transition-delay: 0ms;}

Nous trouvons deux paragraphes inversés en valeur de retard puisque le mouvement apparition commence par le haut et finit par le bas, au contraire de la disparition.

Le retard de l'un sur l'autre est de 50 ms.

Les sous-menus sont identifiés par leur position dans la liste: premier:li:nth-child(1), second: li:nth-child(2)...

Dans cet exemple, j'ai placé 8 sous-menus mais on peut en diminuer le nombre ou l'augmenter; dans ce cas, ajustez les retards dans les deux paragraphes..