* {
padding:0;
margin:0
}
ul,li {
list-style:none
}
a {
text-decoration:none;
display:block
}
.menu>li {
float:left;
position:relative
}
.menu li a {
width:100px;
height:50px;
background:#999;
color:#fff;
text-align:center;
line-height:50px
}
.menu_list {
position:absolute;
left:0;
top:50px;
perspective:400px;
height:0;
}
.menu_list li {
transform:rotateY(90deg);
opacity:0;
transition:transform 0.5s,opacity 0.4s
}
.menu>li:hover .menu_list li {
transform:rotateY(0deg);
opacity:1
}
.menu>li:hover .menu_list li:nth-child(1) {
transition-delay:0ms
}
.menu>li:hover .menu_list li:nth-child(2) {
transition-delay:50ms
}
.menu>li:hover .menu_list li:nth-child(3) {
transition-delay:100ms
}
.menu>li:hover .menu_list li:nth-child(4) {
transition-delay:150ms
}
.menu>li:hover .menu_list li:nth-child(5) {
transition-delay:200ms
}
.menu>li:hover .menu_list li:nth-child(6) {
transition-delay:250ms
}
.menu>li:hover .menu_list li:nth-child(7) {
transition-delay:300ms
}
.menu>li:hover .menu_list li:nth-child(8) {
transition-delay:350ms
}
.menu_list li:nth-child(1) {
transition-delay:350ms
}
.menu_list li:nth-child(2) {
transition-delay:300ms
}
.menu_list li:nth-child(3) {
transition-delay:250ms
}
.menu_list li:nth-child(4) {
transition-delay:200ms
}
.menu_list li:nth-child(5) {
transition-delay:150ms
}
.menu_list li:nth-child(6) {
transition-delay:100ms
}
.menu_list li:nth-child(7) {
transition-delay:50ms
}
.menu_list li:nth-child(8) {
transition-delay:0ms
}
/*height:0;
防止在鼠标移动到下拉列表上显示下拉列表*/
/*perspective:400px;
3D视角*/
/*transition针对transform:rotateY(0deg);
opacity:1*/1.代码精简,没有多余代码,方便学习。
2.难点注释清晰,一点就懂。