Html
    Css
    Js
* {
	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*/

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

下拉菜单旋转90°显示(纯CSS3+H5 顶级精简版)

1.代码精简,没有多余代码,方便学习。

2.难点注释清晰,一点就懂。

1
      总督sir0
      2017/9/1 14:31:32