li:hover属性在做导航和二级菜单时用得非常用多而且很方便，尤其是在没有<a>标签的时候也能使用有时候也是省去了不少麻烦，但由于浏览器众多，有时候并非所有浏览器都支持，这就需要我们添加一个JS来使所有浏览器都能兼容！

JS代码如下：

<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.getElementByIdx_x(“nav”).getElementsByTagName_r(“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>

<style type=”text/css”>

body {padding:0px;margin:0px;font-size:12px; font-family: Verdana,”Trebuchet MS”,”Trebuchet MS”,Helvetica,sans-serif;-webkit-text-size-adjust:none;}

#nav ul {overflow:hidden;}

#menu ul li {float:left; height:30px; width:200px; text-align:center;}

#menu ul li:hover {background:#000; color:#fff;}

</style>

<div id=”menu”><ul><li>TEST</li><li>testtest</li></ul></div>

颜色、样式可以根据实标需要做调整