                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

为啥二级菜单还是不能显示啊？大家帮忙看看到底错哪了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>商城导航</title>
	<style type="text/css">
    *  
	{
      padding:0;
	  margin:0; 
	  font-size: 16px;
	  behavior:url(css/csshover.htc);
	}
	
	.nav{
	  width: 230px;
	  list-style-type: none; 
	  border:1px solid red;
	  margin:20px;
	  overflow: hidden;}
	
	.top-title{ 
		padding-left:20px;
		background: red; 
		width: 260px;
		color:white; 
		height: 40px;
		line-height: 40px; 
		overflow: hidden;
		display: block;}
	
	.nav li{
	   width: 260px; 
	   list-style-type: none;
	   height: 30px; 
	   line-height: 30px;
	   padding-left:10px;
	   overflow: hidden;
	   z-index: 3;
	   position: relative;}
	
	.nav li a{
		color:#888;
		text-decoration: none;
		font-weight: 800;}
     
    .nav li a:hover{
    	color:red;
    	text-decoration: underline;
    	font-weight: 800;}
    
	.nav li:hover{
      box-shadow: 0 0 10px #888;
      webkit-box-shadow:0 0 10px #888;
      -moz-box-shadow:0 0 10px #888;
      border-right: 0;
    }
	
    .menu1{
    	display:none;
    	z-index: 4;
    	width: 500px;
    	height: 400px;
    	position: absolute;
    	left:250px;
    	top:30px;
    	box-shadow: 0 0 5px #ddd;
         webkit-box-shadow:0 0 5px #ddd;
        -moz-box-shadow:0 0 5px #ddd;
        background-color: white;
       }
    
    .nav li:hover .menu1
    {
    	display: block;
    }
    
    .menu1_left
    {
    	float: left;
    	width: 300px;
        height: 400px;
    }
  
</style>
</head>

<body>
<ul class="nav">
	<div class="top-title">商品分类</div>
	<li><a href="#">家电</a>
	    <div class="menu1">
	 	   <div class="menu1_left">
	 	    
	 	    </div>
	 	    <div class="menu1_right">
	 	    	
	 	    </div>
	   </div>
	</li>
	<li><a href="#">家电</a>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	</li>
	<li><a href="#">家电</a></li>
	 <div class="menu1"> 
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
	<li><a href="#">家电</a></li>
	 <div class="menu1">
	 	<div class="menu1_left"></div>
	 	<div class="menu1_right"></div>
	 </div>
</ul>
</body>
</html>