Étapes pour implémenter l'effet de menu déroulant animé à l'aide de CSS3

Nous savons que le menu déroulant créé avec CSS3 n'est pas compatible avec IE6, et IE8 et versions antérieures ne prennent pas en charge certains attributs CSS3, tels que l'opacité, la transition, etc. Cette fois, je vais vous parler des étapes pour implémenter l'effet de menu déroulant animé à l'aide de CSS3.

site-navigation ul ul{min-width: 100px; position: absolute; left:0; top:100%; visibility: hidden; opacity: 0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; margin-top:20px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: #F0F0F0;}
.site-navigation ul li:hover > ul{visibility: visible; opacity: 1; margin-top:0;}
.site-navigation ul ul ul{ left:100%; top:0; margin-top: 0; margin-left: 20px;}
.site-navigation ul ul li:hover > ul{margin-left:0;}
.nav ul{height:0;overflow:hidden;left:0; top:100%;position:absolute;}
.nav li:hover ul{height:auto;width:180px}
.nav li ul li{opacity:0;-webkit-transition:0.5s;transition:0.5s;width:100%;-webkit-transition-delay:0s;transition-delay:0s}
.nav li:hover ul li{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}
.nav ul li a{background:#7770B4;border-color:#6E67A6;color:#fff;line-height:1px;-webkit-transition:1.5s;transition:1.5s}
.nav li:hover ul li a{line-height:35px}
.nav ul{left:0; position:absolute;top:100%; min-width: 120px; visibility: hidden; opacity: 0;}
.nav li ul li{opacity:0; -webkit-transition:0.5s;transition:0.5s;width:100%;-webkit-transition-delay:0s;transition-delay:0s}
.nav li:hover > ul{opacity: 1; visibility: visible;}
.nav li:hover > ul > li{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}
.nav ul li a{background:#7770B4;border-color:#6E67A6;color:#fff;line-height:1px;-webkit-transition:1.5s;transition:1.5s; white-space: nowrap;}
.nav li:hover > ul > li a{line-height:35px}
.nav ul ul{left:100%; top:0;}

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres cas connexes. articles sur le site PHP chinois !

Lecture connexe :

Quels navigateurs nécessitent une vérification de compatibilité en HTML

Implémentation de l'effet de suspension 3D dans les étapes HTML

Faire un enseignement adaptatif à la largeur div

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!