SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<body>
      <div class="container">
	     <ul class="menu">
		    <li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">Menu 1</a>
				<ul class="submenu">
					<li><a href="#">Submenu A</a></li>
					<li><a href="#">Submenu B</a></li>
					<li><a href="#">Submenu C</a></li>
					<li><a href="#">Submenu D</a></li>
					<li><a href="#">Submenu E</a></li>
					<li><a href="#">Submenu F</a></li>
					<li><a href="#">Submenu G</a></li>
					<li><a href="#">Submenu H</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 2</a>
				<ul class="submenu">
					<li><a href="#">Submenu A</a></li>
					<li><a href="#">Submenu B</a></li>
					<li><a href="#">Submenu C</a></li>
					<li><a href="#">Submenu D</a></li>
					<li><a href="#">Submenu E</a></li>
					<li><a href="#">Submenu F</a></li>
					<li><a href="#">Submenu G</a></li>
					<li><a href="#">Submenu H</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 3</a>
				<ul class="submenu">
					<li><a href="#">Submenu A</a></li>
					<li><a href="#">Submenu B</a></li>
					<li><a href="#">Submenu C</a></li>
					<li><a href="#">Submenu D</a></li>
					<li><a href="#">Submenu E</a></li>
					<li><a href="#">Submenu F</a></li>
					<li><a href="#">Submenu G</a></li>
					<li><a href="#">Submenu H</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 4</a>
			</li>
		 </ul>
	  </div>
 </body>

            
*{
			margin:0;
			padding:0;
		}
		html,body{
		background-color:#000;
		}
		.container{
		width:90%;
		height:50px;
		margin:30px auto;
		}
		.menu li{
		position:relative;
		list-style:none;
		background:linear-gradient(#292929,#252525);/*颜色线性渐变，可以用来给导航栏添加背景颜色*/
		border-bottom:2px solid #181818;
		border-top:2px solid #303030;
		}
		.menu > li{/*选择子元素*/
		position:relative;
		float:left;
		}
		.menu > li:first-child{
		border-radius:5px 0 0;
		}
		.menu a{
		display:block;/*让a具备宽高*/
		border-left:3px solid rgba(0,0,0,0);
		text-decoration:none;
		line-height:50px;
		padding:0 25px;
		font-family:"Lucida Console";
		font-size:18px;
		color:#808080;
		text-transform:uppercase;/*单词大写*/
		}
		.menu li:hover{
		background:#1c1c1c;
		border-bottom:2px solid #222222;
		border-top:2px solid #1B1B1B;
		}
		.menu li:hover > a{
		border-radius:5px 0 0;
		border-left:3px solid #C4302B;
		color:#C4302B;
		}
		.submenu{
		
		max-height:0;/*最大高度*/
		perspective:400px;
		}
		.submenu li{
		opacity:0;
		transform:rotateY(90deg);
		transform-style:preserve-3d;
		transition:.5s;/*动画时间*/
		}
		.submenu li:hover a{
		border-left:3px solid #454545;
		border-radius:0;
		color:#fff;
		}
		.menu li:hover .submenu li{
		opacity:1;
		transform:none;
		}
		.menu li:hover .submenu li:nth-child(1){
		transition-delay:0ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(2){
		transition-delay:50ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(3){
		transition-delay:100ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(4){
		transition-delay:150ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(5){
		transition-delay:200ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(6){
		transition-delay:250ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(7){
		transition-delay:300ms;/*延时过度效果*/
		}
		.menu li:hover .submenu li:nth-child(8){
		transition-delay:350ms;/*延时过度效果*/
		}
		.submenu li:nth-child(1){
		transition-delay:350ms;/*延时过度效果 鼠标移开的时候*/
		}
		.submenu li:nth-child(2){
		transition-delay:300ms;/*延时过度效果*/
		}
		.submenu li:nth-child(3){
		transition-delay:250ms;/*延时过度效果*/
		}
		.submenu li:nth-child(4){
		transition-delay:200ms;/*延时过度效果*/
		}
		.submenu li:nth-child(5){
		transition-delay:150ms;/*延时过度效果*/
		}
		.submenu li:nth-child(6){
		transition-delay:100ms;/*延时过度效果*/
		}
		.submenu li:nth-child(7){
		transition-delay:50ms;/*延时过度效果*/
		}
		.submenu li:nth-child(8){
		transition-delay:0ms;/*延时过度效果*/
		}