扁平化菜单功能制作

网页效果：

HTML部分：

		

			

				菜单项目一
				

					
子菜单项01
					
子菜单项02
					
子菜单项03
					
子菜单项04
				
			
			

				菜单项目二
				

					
子菜单项01
					
子菜单项02
					
子菜单项03
					
子菜单项04
				
			
			

				菜单项目三
				

					
子菜单项01
					
子菜单项02
					
子菜单项03
					
子菜单项04
				
			
			

				菜单项目四
				

					
子菜单项01
					
子菜单项02
					
子菜单项03
					
子菜单项04
				
			
			

				菜单项目五
				

					
子菜单项01
					
子菜单项02
					
子菜单项03
					
子菜单项04
				
			
		
	

 CSS部分：

ul,
		li {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		
		a {
			text-decoration: none;
		}
		
		.nav {
			width: 450px;
			height: 40px;
			list-style: none;
			margin: 50px auto;
			line-height: 40px;
			background-color: #333;
			color: #fff;
		}
		
		.nav>li {
			width: 82px;
			margin: 0px 5px;
			float: left;
			text-align: center;
		}
		
		.nav>li>a {
			width: 82px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			display: block;
			color: #FFFFFF;
			transition: all .5s;
		}
		
		.nav>li>a:hover {
			background-color: #0c8ed9;
		}
		
		.nav>li:first-child {
			margin-left: 0px;
		}
		
		.nav>li:last-child {
			margin-right: 0px;
		}
		
		.nav>li>ul {
			line-height: 30px;
			display: none;
		}
		
		.nav>li>ul>li {
			background: #333;
			color: #EEE;
		}
		
		.nav>li>ul>li:hover {
			background: #666;
			color: #FFF;
			cursor: pointer;
		}

JS部分：

$(document).ready(function() {
			var $nav = $(".nav>li");

			$nav.mouseover(function() {
				$(this).children("ul").show();
			});

			$nav.mouseout(function() {
				$(this).children("ul").hide();
			});
		});