IE6 and IE7 do not support second-level sub-ul Problems

Today, I encountered a problem of adding sub-ul under ul,

First paste the html code:

 
 

  
  

  
  

  
  
 
   
Force System
 
   
Card System
 
   
Technology System
 
   
Decomposition System
 
   
Upgrade System
 
  
  
  

 
 

The reason for using the above structure is that if the second-level ul is placed in the parent li, the coverage of the hover floating layer will be affected: the floating layer will cover all the second-level ul, affecting the mouse clicking the second-level menu operation. So I put the second-level ul out and put it out of li. However, in ie7, the second-level ul is not displayed.

Corresponding CSS code:

#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 */}

Ul. gamedata-list in IE6 and IE7 cannot be hidden. Effect

In a standard browser, the effect is as follows:

Check to find this ul> ul structure may be not standardized, indeed is the problem of parsing compatibility under the IE6-7, it is recommended that the second structure in the table layout separated by td to prevent parsing errors. For me, I am not willing to use this method. I prefer to start with CSS or structure adjustment. Some people say that using dl> dd instead of level 2 ul can avoid this problem. If you are interested, try it.

Several attempts to use CSS to solve the problem, but found that it is not valid, too stubborn for the IE6-7.

Finally, the structure can only be changed back to the original ul form under li.

The original problem is that only IE7 + supports any element: hover pseudo class, so it discards the hover Effect of IE6, which is about to expire, later, I found that the jquery click and mouseover effects I wrote have limitations: the click effect can be triggered only on the floating layer. Therefore, the B label of the second-level ul list is changed to a label, and the container for hover is changed to a label to support ie6. In addition, the link is href, otherwise the IE6-8 is unable to show the effect of moving the mouse, so as to be compatible with all the browsers under the menu click to switch the corresponding content.

The modified structure is as follows:

 
 

  
  

  
  
  
   
 
    
Force System
 
    
Card System
 
    
Technology System
 
    
Decomposition System
 
    
Upgrade System
 
   
  
  

 
 

The newly modified CSS style code:

#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 */}

Click effect implemented by jQuery:

$ (Function () {$ (". leftnav-item "). click (function (e) {// e. stopPropagation (); var $ target = (e.tar get); 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 blocks bubble var $ target = values (e.tar get); 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 "detail .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 ");})

I haven't written a log record for a long time. It seems that I have a lot of experiences. I will continue the next day.