IE6、IE7不支持二级子ul的问题

今天遇到一个在ul下增加子ul的问题，

先贴html代码：

		

			

			

				
				

			
			

				
部队系统
				
卡片系统
				
科技系统
				
分解系统
				
升级系统
			
			

		

采用上述结构的原因是起初二级ul放在父li里面的话会影响hover浮层效果覆盖的区域：浮层会将二级ul全部罩住，影响鼠标点击二级菜单操作。所以就把二级ul拿出来放在li外了。可是这样ie7下就不显示二级ul了。

对应CSS代码：

#leftnav{position:absolute;z-index:9;left:10px ;top:10px;border: 1px solid #c8c2c0;width: 240px;overflow: hidden;border-bottom: none;}
.leftnav-item{position:relative;width: 100%;height: 98px;border-bottom: 1px solid #c8c2c0;float: left;cursor: pointer;}
#leftnav1{}
.leftnav-layer{display:block;position: absolute;left: 0;top: 0;width: 100%;height: 98px;bottom:98px;}
.cur,.leftnav-layer:hover{background-color: #000;-webkit-opacity:0.3 ;-moz-opacity: 0.3;-o-opacity:0.3;opacity: .3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter: alpha(opacity=30);}
.gamedata-list{float:left;background: url("../../zt/gamedata_ppsg/data.png") no-repeat 0 0 transparent;width:240px;height: 342px;}
#leftnav2{height: 440px;}
.gamedata-item{cursor:pointer;position:relative;padding:1px 0;height: 65px;line-height:65px;float: left;padding-left: 90px;font-size: 27px;color: #fff;}
.gamedata-layer{position: absolute;left: 18px;top: 5px;width: 200px;height: 100%;}
.sel,.gamedata-layer:hover {/*position: absolute;left: 18px;top: 5px;width: 200px;height: 65px;*/background:url("blank");
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(to bottom,rgba(255,255,255,.5), rgba(255,255,255,0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff,endColorstr=#00ffffff)"; /*Filter for IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff, endColorstr=#00ffffff); /*Filter for older IEs */
}

而在标准浏览器里是这样的效果：

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+sunUxLeiz9bV4tbWdWwgPiB1bL3hubm/ycTcyseyu7rPuea3tqOsyLfKtcrHSUU2LTfPwrXEveLO9rzmyN3Oyszio6y5+s3i09C9qNLpvau0y7b+vLa94bm5t8XU2nRhYmxlsry+1sDv08N0ZLfWuPS/qtLUt8DWub3izva07c7zoaO21NPaztLKx7K7zKvUuNLiyrnTw9Xi1tb1v73FtcS3vbeoo6y4/NS40uK007j5sb7Jz7TTQ1NTu/K199X7veG5ucjrytaho9PQyMvLtdPDZGwgPiBkZLT6zOa2/ry2dWy/ydLUu9ix3NXiuPbOyszio6zT0NDLyKS1xL/J0tTK1NK7z8KhozwvcD4KPHA+tuC0zrOiytTKudPDQ1NTwLS94r72tau3os/Wzt7Qp6OsttRJRTYtN8yrzee5zMHLoaM8L3A+CjxwPtfuuvPWu8Tcvau94bm5uMS72NStwLS1xNTabGnPwrfFdWzQzsq9oaM8L3A+CjxwPiA8L3A+CjxwPtStwLS05tTatcTOysziysfS8s6q1rvT0ElFNyYjNDM7ssXWp7PWyM66ztSqy9i1xDpob3Zlcs6xwOCjrMv50tTF18b6wcvV4rj2vLS9q7n9yrG1xElFNrXEaG92ZXLQp7n7o6y688C0t6LP1tfUvLrQtLXEanF1ZXJ5IGNsaWNrus1tb3VzZW92ZXLQp7n709C+1s/e0NSjuta709C149TauKGy48nPssXE3LSlt6JjbGlja9Cnufuho7nKtvi9q7b+vLZ1bMHQse21xGKx6sepuPy4xM6qYbHqx6mjrMfSttTSqmhvdmVytcTI3cb3u7uzyWGx6sep0tTWp7PWaWU2o6zB7c3ittRhwbS907zT0tRocmVmyvTQ1KOst/HU8klFNi040rLKx87et6jVucq+yvOx6tLGyc+1xNCnufu1xKOs1eLR+dLUvObI3cv509Dkr8DAxvfPwrXEssu1pbXju/fH0Lu7ttTTprXExNrI3aGjPC9wPgo8cD4gPC9wPgrQ3rjEuvO1xL3hubnI58/Cy/nKvqO6CjxwPjxwcmUgY2xhc3M9"brush:java;">

• 
• 
  • 部队系统
  • 卡片系统
  • 科技系统
  • 分解系统
  • 升级系统
• 

#leftnav{position:absolute;z-index:9;left:10px ;top:10px;border: 1px solid #c8c2c0;width: 240px;overflow: hidden;border-bottom: none;}
.leftnav-item{position:relative;width: 100%;height: 98px;border-bottom: 1px solid #c8c2c0;float: left;cursor: pointer;}
.leftnav-layer{display:block;width: 240px;height: 98px;}
.cur, .leftnav-item a:hover{background-color: #000;-webkit-opacity:0.3 ;-moz-opacity: 0.3;-o-opacity:0.3;opacity: .3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);filter: alpha(opacity=30);}
.gamedata-list{float:left;background: url("../../zt/gamedata_ppsg/data.png") no-repeat 0 0 transparent;width:240px;height: 342px;}
#leftnav2{height: 440px;}
.gamedata-item{cursor:pointer;position:relative;padding:1px 0;height: 65px;line-height:65px;float: left;padding-left: 90px;font-size: 27px;color: #fff;}
.gamedata-layer{position: absolute;left: 18px;top: 5px;width: 200px;height: 100%;}
.sel,.gamedata-item a.gamedata-layer:hover {position: absolute;left: 18px;top: 5px;width: 200px;height: 65px;background:url("blank");
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(to bottom,rgba(255,255,255,.5), rgba(255,255,255,0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff,endColorstr=#00ffffff)"; /*Filter for IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff, endColorstr=#00ffffff); /*Filter for older IEs */
}

	$(function(){
		$(".leftnav-item").click(function(e){
			//e.stopPropagation();
			var $target = $(e.target);
			var navindex = $(this).attr("data-index");
			$(this).find(".leftnav-layer").addClass("cur");
			$(this).siblings().find(".leftnav-layer").removeClass("cur");
			$(".gamedata-item").find(".gamedata-layer").removeClass("sel");
			$("#innervd").css("display","none");

			if(navindex == 2){				
				$(".gamedata-item").eq(0).find(".gamedata-layer").addClass("sel");
				$(".gamedata-item").not(':eq(0)').find(".gamedata-layer").removeClass("sel");
				$(".con").css("display","none");
				$("#c1").css("display","block");
			}
			$(".con-wrapper").css("display","none");
			$("#con" + navindex).css("display","block");

		});
		$(".gamedata-item").click(function(e){
			e.stopPropagation();//IE阻止冒泡
			var $target = $(e.target);
			var liindex = $(this).index() + 1;
			$(this).find(".gamedata-layer").addClass("sel");
			$(this).siblings().find(".gamedata-layer").removeClass("sel");
			$("#innervd").css("display","none");
			if($target.is("#gamedata-layer" + liindex)){
				$(".con-wrapper").css("display","none");
				$("#con2").css("display","block");

				$(".con").css("display","none");
				$("#c" + liindex).css("display","block");

			}
		});
		$("#wujiang-link li").mouseover(function(e){
			var index = $(this).index();
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#wujiang-intro li").eq(index).css("display","block");
			$("#wujiang-intro li").eq(index).siblings().css("display","none");
		}).eq(0).trigger("mouseover");
		
	})