css下拉菜单不能使用IES6

Question

我有一个CSS菜单，适用于所有新的浏览器，但不适用于IES 6. 我尝试了很多，但这并没有工作... 任何修复。

菜单代码是

<div class="nav-container-outer"> 
      <ul id="nav-container" class="nav-container"> 
       <li><a class="item-primary" href="index.html">Home</a> </li> 
       <li><a class="item-primary" href="#">About us</a> 
     <ul> 
     <li><a class="item-primary" href="vision.html">Vision </a> </li> 
     <li><a class="item-primary" href="manage.html">Management</a> </li>   <li><a class="item-primary" href="faq.html">FAQ</a> </li> 
    </ul> 
    </div> 

CSS代码是波纹管

/*^'^ Navigation Structure ^'^*/ 
.nav-container-outer{ 
background: #990000; 
padding: 0px; 
height: 39px; 
background: url(images/nav-bg.jpg); 
} 
.float-left{ 
float: left; 
} 
.float-right{ 
float: right; 
} 
.nav-container .divider{ 
display:block; 
font-size:1px; 
border-width:0px; 
border-style:solid; 
} 
.nav-container .divider-vert{ 
float:left; 
width:0px; 
display: none; 
} 
.nav-container .item-secondary-title{ 
display:block; 
cursor:default; 
white-space:nowrap; 
} 
.clear{ 
font-size:1px; 
height:0px; 
width:0px; 
clear:left; 
line-height:0px; 
display:block; 
float:none; 
} 
.nav-container{ 
position:relative; 
zoom:1; 
margin: 0 auto; 
} 
.nav-container a, .nav-container li{ 
float:left; 
display:block; 
white-space:nowrap; 
} 
.nav-container div a, .nav-container ul a, .nav-container ul li{ 
float:none; 
} 
.nav-container ul{ 
left:-10000px; 
position:absolute; 
} 
.nav-container, .nav-container ul{ 
list-style:none; 
padding:0px; 
margin:0px; 
} 
.nav-container li a{ 
float:none 
} 
.nav-container li{ 
position:relative; 
} 
.nav-container ul{ 
z-index:10; 
} 
.nav-container ul ul{ 
z-index:20; 
} 
.nav-container ul ul ul{ 
z-index:30; 
} 
.nav-container ul ul ul ul{ 
z-index:40; 
} 
.nav-container ul ul ul ul ul{ 
z-index:50; 
} 
li:hover>ul{ 
left:auto; 
} 
#nav-container ul { 
top:100%; 
} 
#nav-container ul li:hover>ul{ 
top:0px; 
left:100%; 
} 

/*^'^ Primary Items ^'^*/ 
#nav-container a{ 
padding:2px 34px 7px 15px; 
margin: 10px 0px 0px 0px; 
color: #003450; 
font-family: Trebuchet MS, Arial, sans-serif, Helvetica; 
font-size:14px; 
text-decoration:none; 
font-weight: bold; 
background-repeat: no-repeat; 
background-position: top; 
} 

#nav-container a:hover{ 
color: #fff; 
background-repeat: no-repeat; 
background-position: center; 
} 

/*^'^ Secondary Items Container ^'^*/ 
#nav-container div, #nav-container ul{ 
padding:10px 4px 10px 4px; 
margin:0px 0px 0px 0px; 
background:#7ACFF4; 
background-repeat: repeat-x; 
border-bottom: 1px solid #003450; 
} 

/*^'^ Secondary Items ^'^*/ 
#nav-container div a, #nav-container ul a{ 
padding:3px 10px 3px 6px; 
background-color: #FFFFFF; 
background: url(images/item-secondary-bg.jpg); 
background-repeat: no-repeat; 
background-position: 0px 22px; 
font-size:11px; 
border-width:0px; 
border-style:none; 
margin: 0px 0px 0px 0px; 
width: 149px; 
} 

/*^'^ Secondary Items Hover State ^'^*/ 
#nav-container div a:hover, #nav-container ul a:hover{ 
background-color: #FFFFFF; 
background: url(images/item-secondary-bg.jpg); 
background-repeat: no-repeat; 
color:#ffffff; 
} 

/*^'^ Secondary Item Titles ^'^*/ 
#nav-container .item-secondary-title{ 
cursor:default; 
padding:4px 0px 3px 7px; 
color: #6C3600; 
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; 
font-size:11px; 
/* background: url(images/item-secondary-title-bg.jpg); */ 
background-repeat: no-repeat; 
font-weight:bold; 
} 

/*^'^ Horizontal Dividers ^'^*/ 
#nav-container .divider-horiz{ 
border-top-width:1px; 
margin:5px 5px; 
border-color: #C16100; 
} 

/*^'^ Vertical Dividers ^'^*/ 
#nav-container .divider-vert{ 
border-left-width:1px; 
height:15px; 
margin:4px 2px 0px 2px; 
border-color:#AAAAAA; 
} 

Answer 1

的Internet Explorer（5和）6不支持/明白/尊重上比其他a任何元素使用:hover元素，悲伤。因此，IE6兼容性的下降几乎总是在li中使用a元素。

不幸的是，我无法为IE6兼容下拉/弹出菜单提供工作标记，因为我无法访问运行IE6的计算机;然而在cssplay.co.uk出现了一个有趣的页面：

1. Multi-level fly-out menu (CSS-only)。

参考文献：

• Compatibility tables at Quirksmode.org。