九江seo_致力于江西seo网站优化服务_丁文华博客

大家都知道，ie下只支持a标签的hover属性，li下的hover属性却不支持。如何让ie支持li的hover属性呢？下面给大家讲讲两种方法。

因为IE6不认li:hover,所以需要一段JS代码来实现这个功能
网上有很多种,这里我选择其中的一种我觉得最方便的
—————–code—————–
<script type=”text/javascript”><!–//–><![CDATA[//><!--
sfHover =function(){
varsfEls =document.getElementById("nav").getElementsByTagName("LI");
for(var i=0; i<sfEls.length; i++){
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(newRegExp(” sfhover\b”),”");
}
}
}
if (window.attachEvent)window.attachEvent(“onload”, sfHover);
//–><!]]>
</script>
—————–code—————–
上色好麻烦…我这里大概按Editplus配了下色,嗯嗯
顺便贴个使用的例子:
—————–code—————–
<ulid=”nav”>
<li><ahref=”#”>这是显示的标题1</a>
<ul>
<li><ahref=”#”>这是列表中的内容1</a></li>
<li><ahref=”#”>这是列表中的内容2</a></li>
<li><ahref=”#”>这是列表中的内容3</a></li>
<li><ahref=”#”>这是列表中的内容4</a></li>
</ul>
</li>
<li><ahref=”#”>这是显示的标题2</a>
<ul>
<li><ahref=”#”>这是列表中的内容5</a></li>
<li><ahref=”#”>这是列表中的内容6</a></li>
<li><ahref=”#”>这是列表中的内容7</a></li>
<li><ahref=”#”>这是列表中的内容8</a></li>
</ul>
</li>
</ul>
—————–code—————–
还有css,其中的注释我没改,样式大体内容可以自己改 :
—————–code—————–
#nav, #nav ul{/* all lists */
padding:0;
margin:0;
list-style:none;
line-height:1;
}
#nav li{/* all list items */
float:left;
width:10em;/* width needed or else Opera goes nuts */
}
#nav li ul{/* second-level lists */
position:absolute;
background:orange;
width:10em;
left:-999em;/* using left instead of display to hide menus because display: none isn’t read by screen readers 这里用left:-999em的也行,用display:none的也行,看您喜欢用啥 */
}#nav li:hover ul, #nav li.sfhover ul{/* lists nested under hovered list items */
left:auto;/* 如果上面用left的了,那么这就不用改,最多改个数,如果用display:none了,那么这里改成display:block*/

}
—————–code—————–
至此就可以用了
接下来,如果需要给下拉的那个列表定位
用到position:absolute,并且设置父元素li为position:relative了的话
那么就会发现下拉菜单不会遮住下面的元素,而是跑到了所有层的最底下
并且无论您怎么设置z-index都没有用
那么关键来了,删掉父元素li的position:relative再看看,好了吧?
或许您要问了,如果删了父元素的包含框,那怎么定位absolute那位呢?
用margin吧~!哈哈,比如:
—————–code—————–
#nav li ul {
position:absolute;
background:azure;
width:200px;
height:200px;
display:none;
margin-left:80px;
margin-top:-15px;
}
—————–code—————–
到此说完了,再有新问题我再接着发
PS:此方法兼容 IE6 IE7 IE8 Chrome Firefox3

第二种方法：在IE6中利用表格。

添加一条#menu li a table{ display:block; width:100%; border:none;}
ｈｔｍｌ中的注释的表格加上<!–[if lte IE 6]><a href=”#”><table cellpadding=”0″ cellspacing=”0″><tr><td><![endif]–>