CSS3制作凤凰网导航

2015/07/01 37618
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>CSS3制作凤凰网导航|w3cplus</title>
	<meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
	<meta name="description" content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。">
	<link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">
	<title>CSS3制作凤凰网导航</title>
	<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body {
			font-size: 12px;
			font-family: 'Covered By Your Grace', cursive;
			padding: 100px;
		}
		.container {
			width: 960px;
			margin: 0 auto;
		}
		/*menu style start*/
		#nav {
			width: 960px;
			margin: 50px auto;
			background: #8c319c;
			color: #fff;
			position:relative;
			box-shadow: -1px 0 0 #732184,-2px 0 0 #732184,-3px 0 0 #732184,-4px 0 0 #732184,-5px 0 0 #732184,-6px 0 0 #732184,-7px 0 0 #732184,-8px 0 0 #732184,-9px 0 0 #732184,-10px 0 0 #732184;
			border-top: 10px solid #000;
			float: left;
			width: 100%;
		}
		#nav::before {
			content:"";
			border: 5px solid #732184;
			border-color:#732184 #732184 #cecece #cecece;
			position: absolute;
			bottom: 0;
			left: -10px;
			width: 0;
			height: 0;
			display: block;
			z-index:2;
		}
		
		#nav::after {
			content:"";
			width: 10px;
			height: 9px;
			background: #000;
			position: absolute;
			top: -9px;
			left: -10px;
			display: block;
		} 

		#nav li {
			float: left;
			display: inline;
		}
		#nav a {
			display: block;
			float: left;
			padding: 10px 15px;
			text-decoration: none;
			text-transform: uppercase;
			color: #fff;
			font-weight: bold;
			font-size: 24px;
			box-shadow: 2px 0 0 rgba(255,255,255,0.5);
			-webkit-transition: all 0.5s ease-in .218s;
			-moz-transition: all 0.5s ease-in .0038s;
			-o-transition: all 0.5s ease-in .0038s;
			transition: all 0.5s ease-in .0038s;
		}
		#nav .sub-menu {
			position: absolute;
			left: 0;
			top: 100%;
			background: #eff7f7;
			right: 0;
			box-shadow: -1px 0 0 #cecece,-2px 0 0 #cecece,-3px 0 0 #cecece,-4px 0 0 #cecece,-5px 0 0 #cecece,-6px 0 0 #cecece,-7px 0 0 #cecece,-8px 0 0 #cecece,-9px 0 0 #cecece,-10px 0 0 #cecece;
		}
		#nav .sub-menu::before {
			content:"";
			border: 5px solid #cecece;
			border-color:#cecece #cecece #fff #fff;
			position: absolute;
			bottom: 0;
			left: -10px;
			width: 0;
			height: 0;
			display: block;
			z-index:2;
		}
		
		#nav .sub-menu a {
			color: #000;
			font-size: 20px;
			font-weight: normal;
		}
		#nav a:hover,
		#nav .expansion a {
			background: #eff7f7;
			color: #000;
			box-shadow: 1px 0 0 #a5adad, 2px 0 0 #b5bdbd,3px 0 0 #a5adad;
			padding-top: 14px;
			margin-top: -4px;
		}
		#nav .sub-menu a {
			background: none;
			box-shadow: none;
			padding-top: 10px;
			margin-top: 0;
		}
		#nav .sub-menu a:hover {
			color: rgb(140, 49, 156);
		}
	</style>
</head>
<body>
<div class="container">
	<h1>CSS3制作凤凰网导航</h1>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li class="expansion">
			<a href="#">Tutorial</a>
			<ul class="sub-menu">
				<li><a href="#">css</a></li>
				<li><a href="#">css3</a></li>
				<li><a href="#">html</a></li>
				<li><a href="#">html5</a></li>
				<li><a href="#">jquery</a></li>
				<li><a href="#">javascript</a></li>
				<li><a href="#">php</a></li>
			</ul>
		</li>
		<li><a href="demo2.html">Demo</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<p class="author" style="clear:both;padding-top: 50px;">作者：大漠-<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a><br>如有更好建议或疑问请加群：1041263</p>

</div>	
</body>
</html>
代码片段
