CSS/XHTML菜单 - 在所有浏览器中工作 - IE6帮助

我发现这个菜单正是我想要的。它适用于所有现代浏览器和IE 7/8。我需要找到一个修复它在IE6中工作。任何帮助将不胜感激。CSS/XHTML菜单 - 在所有浏览器中工作 - IE6帮助

http://lab.returnwt.net/htmlcss/tabmenu/

2011-04-01 lordryan

任何原因你[仍然]（http://www.bringdownie6.com/）想[去]（http://www.ie6countdown.com/）[支持]（http://www.ie6nomore.com/）[IE6 ]（http://www.contrast.ie/blog/dear-ie6-i-hate-you/）？ – Eric 2011-04-01 18:03:19

与IE6这个菜单的问题是，它的使用选择是这样的：

IE6只支持:hover上a元素。

幸运的是，有一个非常简单的修复方法可以在IE6中使用此菜单。

这就是所谓的Whatever:hover

下载（精缩）csshover3.htc文件。

添加这个CSS：

body { 
    behavior: url("csshover3.htc"); 
}

下面是我测试了IE6的工作一个自包含的文件，前提是csshover3.htc文件是在同一文件夹：

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple Tabbed Navigation - CSS3</title> 
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<meta charset="utf-8" /> 

<style> 
body { 
    behavior: url("csshover3.htc"); 
} 

body 
{ 
    background: #efefef url(images/bg_main.png); 
    font: 13px Helvetica, Arial; 
    margin: 0; 
} 

header 
{ 
    background: url(images/bg_head.png); 
    display: block; /* Compatibility fix */ 
} 

header:after 
{ 
    background: rgba(0, 0, 0, 0.1); 
    content: ' '; 
    height: 1px; 
    position: absolute; 
    width: 100%; 
    z-index: 10; 
} 

header ul#menu 
{ 
    border-bottom: 5px solid #fff; 
    margin: 0; 
    overflow: hidden; 
    padding: 0 10px; 
    padding-top: 100px; 
    list-style: none 
} 

header ul#menu li 
{ 
    float: left; 

} 

header ul#menu li a 
{ 
    background: #b1d0dd; 
    border-top: 1px solid #d0e2ea; 
    color: #fff; 
    font-weight: bold; 
    display: block; 
    line-height: 34px; 
    margin-right: 2px; 
    padding: 0 20px; 
    text-decoration: none; 
    text-shadow: 0 -1px rgba(0, 0, 0, 0.25); 

    border-radius: 3px 3px 0 0; /* Currently working on Firefox 4.0b (Nightly), Chrome 8.0.xxxx and Opera 10.63+ */ 

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B1D0DD), to(#89b8cc)); 
    background-image: -moz-linear-gradient(top, #B1D0DD, #89B8CC); 
} 

header ul#menu li > ul 
{ 
    display: none; 
} 

header ul#menu li a:hover 
{ 
    background: #fff; 
    border-top-color: #fff; 
    color: #666; 
    text-shadow: none; 
} 

header ul#menu ul { 
    background: #fff; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    display: none; 
    margin-left: 0; 
    margin: 0; 
    padding: 5px 0 0 0; 
    position: absolute; 
    z-index: 999; 
} 

header ul#menu ul li 
{ 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    border-width: 0 1px; 
    float: none; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

header ul#menu ul li a 
{ 
    background: none; 
    border-bottom: 1px solid #ededed; 
    border-top: none; 
    color: #666; 
    font-weight: normal; 
    font-size: 12px; 
    margin: 0 20px; 
    padding: 0; 
    text-shadow: none; 
    width: 118px; 
} 

header ul#menu li a.home-icon span 
{ 
    background: url(images/home-icon.png) no-repeat center center; 
    display: block; 
    text-indent: -999em; 
    overflow: hidden; 
    text-align: left; 
    direction: ltr; 
    width: 16px; 
} 

header ul#menu li a.home-icon:hover span 
{ 
    background-image: url(images/home-icon-hover.png); 
} 

header ul#menu ul li:last-child a 
{ 
    border-bottom: none; 
} 

header ul#menu li:hover ul 
{ 
    display: block; 
} 

header ul#menu ul li a:hover 
{ 
    color: #000; 
} 

header ul#menu ul li:last-child 
{ 
    border-bottom: none 
} 
</style> 

</head> 
<body> 
    <header> 
     <ul id="menu"> 
      <li><a href="#homepage" class="home-icon"><span>Home</span></a></li> 
      <li> 
       <a href="#">Community</a> 
       <ul> 
        <li><a href="#">Recent Activity</a></li> 
        <li><a href="#">Member Forum</a></li> 
        <li><a href="#">Member List</a></li> 
        <li><a href="#">Member Groups</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Pet Help</a></li> 
      <li><a href="#">Pets for Sale</a></li> 
      <li><a href="#">Pet Services</a></li> 
     </ul> 
    </header> 
</body> 
</html>

来源

2011-04-01 22:19:12 thirtydot

CSS/XHTML菜单 - 在所有浏览器中工作 - IE6帮助

回答

相关问题