html——鼠标移动到块显示菜单

我们在做前端布局的时候，当我们想要实现多层布局时，就会想到鼠标移动显示和消失显示菜单，就例如拉勾网的菜单特效，下面是一个简单点的实例：

showDiv.html:

	
		
		
	
	
		

			

				
技术
				
Java
				
PHP
				
C++
				

				

					
后端开发
					

						
123
							

						
						
123
							

						
					
				
			
			

				
技术
				
Java
				
PHP
				
C++
				

				

					
后端开发
					

						
123
							

						
						
123
							

						
					
				
			
			

				
技术
				
Java
				
PHP
				
C++
				

				

					
后端开发
					

						
123
							

						
						
123
							

						
					
				
			
		
		
		
	

show.css:

.menu{
	width:321px;
	height:400px;
	border:1px solid #aaa;
}

.menu_1{
	width:321px;
	height:55px;
	clear:both;
}

.menu_1_text1{
	float:left; 
	width:60px;
	height:60px;
	font-size:18px;
	line-height:60px;   
	margin-left: 21px;
}

.menu_1_text2{
	float:left;	
	width:60px;
	height:60px;
	font-size:14px;
	line-height:60px;
}

.menu_1_img{
	float:left;	
	width: 6px;
    margin-top: 24px;
    height: 11px;
    margin-left: 37px;
    background: url(http://www.lgstatic.com/www/static/index/modules/sidebar/img/arrow_92b8589.png) 0 0 no-repeat;
}

.showdiv{
	width:600px;
	height:400px;
	/* margin-top: -1px; */
	margin-left: 321px;
	display:none;
	background-color:#fff;
	border:1px solid #aaa;
}

.showdiv_head{
	width:600px;
	height:50px;
	line-height:60px;
	font-size:18px;
	background-color:#fff;
	margin-left: -2px;
}

.showdiv_content{
	width:600px;
	height:200px;
	line-height:60px;
	font-size:18px;
}

.showdiv_content_text{
	float:left;
	width:60px;
	height:20px;
	text-align:center;
	line-height:60px;
	font-size:14px;
}

.showdiv_content_text_info{
	float:left;
	width:50px;
	height:40px;
	margin-top: -17px;
	
	display:none;
	background-color:#faa;
	border:1px solid #aaa;
}