Shulou(Shulou.com)06/01 Report--

This article is about how to use css3 to achieve animated drop-down menus. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

.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; 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;}

Drop-down menus made with CSS are not compatible with IE66 (IE6 does not support: hover pseudo-class selector). IE8 and below do not support some CSS3 attributes, such as opacity, transition, and so on.

Thank you for reading! On "how to use css3 to achieve animation drop-down menu effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.