css实现炫酷下拉菜单翻转效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现炫酷下拉菜单翻转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <style>
        * {
        	margin:0;
        	padding:0;
        }
        html {
        	background-color:#000;
        }
        .container {
        	margin:30px auto;
        	width:90%;
        }
        /* general styles */.menu,.menu ul {
        	list-style:none;
        	padding:0;
        	margin:0;
        }
        .menu {
        	height:58px;
        }
        .menu li {
        	background:-moz-linear-gradient(#292929,#252525);
        	background:-ms-linear-gradient(#292929,#252525);
        	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#292929),color-stop(100%,#252525));
        	background:-webkit-linear-gradient(#292929,#252525);
        	background:-o-linear-gradient(#292929,#252525);
        	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929',endColorstr='#252525');
        	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929',endColorstr='#252525')";
        	background:linear-gradient(#292929,#252525);
        	border-bottom:2px solid #181818;
        	border-top:2px solid #303030;
        	min-width:160px;
        }
        .menu >li {
        	display:block;
        	float:left;
        	position:relative;
        }
        .menu >li:first-child {
        	border-radius:5px 0 0;
        }
        .menu a {
        	border-left:3px solid rgba(0,0,0,0);
        	color:#808080;
        	display:block;
        	font-family:'Lucida Console';
        	font-size:18px;
        	line-height:54px;
        	padding:0 25px;
        	text-decoration:none;
        	text-transform:uppercase;
        }
        /* onhover styles */.menu li:hover {
        	background-color:#1c1c1c;
        	background:-moz-linear-gradient(#1c1c1c,#1b1b1b);
        	background:-ms-linear-gradient(#1c1c1c,#1b1b1b);
        	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1c1c1c),color-stop(100%,#1b1b1b));
        	background:-webkit-linear-gradient(#1c1c1c,#1b1b1b);
        	background:-o-linear-gradient(#1c1c1c,#1b1b1b);
        	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c',endColorstr='#1b1b1b');
        	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c',endColorstr='#1b1b1b')";
        	background:linear-gradient(#1c1c1c,#1b1b1b);
        	border-bottom:2px solid #222222;
        	border-top:2px solid #1B1B1B;
        }
        .menu li:hover >a {
        	border-radius:5px 0 0 0;
        	border-left:3px solid #C4302B;
        	color:#C4302B;
        }
        /* submenu styles */.submenu {
        	left:0;
        	max-height:0;
        	position:absolute;
        	top:100%;
        	z-index:0;
        	-webkit-perspective:400px;
        	-moz-perspective:400px;
        	-ms-perspective:400px;
        	-o-perspective:400px;
        	perspective:400px;
        }
        .submenu li {
        	opacity:0;
        	-webkit-transform:rotateY(90deg);
        	-moz-transform:rotateY(90deg);
        	-ms-transform:rotateY(90deg);
        	-o-transform:rotateY(90deg);
        	transform:rotateY(90deg);
        	-webkit-transition:opacity .4s,-webkit-transform .5s;
        	-moz-transition:opacity .4s,-moz-transform .5s;
        	-ms-transition:opacity .4s,-ms-transform .5s;
        	-o-transition:opacity .4s,-o-transform .5s;
        	transition:opacity .4s,transform .5s;
        }
        .menu .submenu li:hover a {
        	border-left:3px solid #454545;
        	border-radius:0;
        	color:#ffffff;
        }
        .menu >li:hover .submenu,.menu >li:focus .submenu {
        	max-height:2000px;
        	z-index:10;
        }
        .menu >li:hover .submenu li,.menu >li:focus .submenu li {
        	opacity:1;
        	-webkit-transform:none;
        	-moz-transform:none;
        	-ms-transform:none;
        	-o-transform:none;
        	transform:none;
        }
        /* CSS3 delays for transition effects */.menu li:hover .submenu li:nth-child(1) {
        	-webkit-transition-delay:0s;
        	-moz-transition-delay:0s;
        	-ms-transition-delay:0s;
        	-o-transition-delay:0s;
        	transition-delay:0s;
        }
        .menu li:hover .submenu li:nth-child(2) {
        	-webkit-transition-delay:50ms;
        	-moz-transition-delay:50ms;
        	-ms-transition-delay:50ms;
        	-o-transition-delay:50ms;
        	transition-delay:50ms;
        }
        .menu li:hover .submenu li:nth-child(3) {
        	-webkit-transition-delay:100ms;
        	-moz-transition-delay:100ms;
        	-ms-transition-delay:100ms;
        	-o-transition-delay:100ms;
        	transition-delay:100ms;
        }
        .menu li:hover .submenu li:nth-child(4) {
        	-webkit-transition-delay:150ms;
        	-moz-transition-delay:150ms;
        	-ms-transition-delay:150ms;
        	-o-transition-delay:150ms;
        	transition-delay:150ms;
        }
        .menu li:hover .submenu li:nth-child(5) {
        	-webkit-transition-delay:200ms;
        	-moz-transition-delay:200ms;
        	-ms-transition-delay:200ms;
        	-o-transition-delay:200ms;
        	transition-delay:200ms;
        }
        .menu li:hover .submenu li:.........完整代码请登录后点击上方下载按钮下载查看