最近在做一个网站时发现在IE6下下拉菜单竟然无法显示，于是上网查了相关资料。

    原来IE6不支持除a标签以外的hover属性，我们了解hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置hover属性效果。而此属性效果的设置在IE6中，只对a标签有效，也就是说，IE6只能解释链接元素的悬停效果。其他元素的悬停效果IE6就不予理睬了。

    没办法，只有加入JS了，也不知有其它办法没，正在关注中。

    加入如下JS代码可解决问题，可对于不启动JS的浏览器那就麻烦了！

js:(document.getElementById("nav") 同时改为自己的Id)

<script language="javascript">

stuHover = function() {

var cssRule;

var newSelector;

for (var i = 0; i < document.styleSheets.length; i++)

   for (var x = 0; x < document.styleSheets[i].rules.length ; x++)

    {

    cssRule = document.styleSheets[i].rules[x];

    if (cssRule.selectorText.indexOf("LI:hover") != -1)

    {

     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");

     document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);

    }

   }

var getElm = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<getElm.length; i++) {

   getElm[i].onmouseover=function() {

    this.className+=" iehover";

   }

   getElm[i].onmouseout=function() {

    this.className=this.className.replace(new RegExp(" iehover\\b"), "");

   }

}

}

if (window.attachEvent) window.attachEvent("onload", stuHover);

</script>

id

<div id="nav">

<ul><li>让IE6支持LI:HOVER的JS代码</li></ul>

</div>

在做完以上工作后，却又出现了另外一个问题，如图：

200910202 200910201

上图第一个为IE7，第二个为IE6，下拉菜单代码用了

<span><a>链接一</a><a>链接二</a></span>，在IE6下<a></a>，自动换行了，不是我要的IE7下的效果，看下css，原来我把span指定了width:auto;，而IE6下span  链接真发生了换行，如果要想不让它换行，需要为span指定一个宽度，于是加入了width:400px;成功解决问题。

      不过仍然还有一个问题，也许读者会注意到，在IE6中导航与下图之间有一段距离，暂时没有解决，不知又是IE6与IE7的哪里不同之处，有待于解决！如果你了解这些，请留下解决方法，在此谢谢了！