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

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

代码语言：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;
        }
 .........完整代码请登录后点击上方下载按钮下载查看