【已验证】onMouseOver,onMouseOut在IE6下无法显示菜单的问题

78 2013-8-20 22:56

问题描述:

先看一段html代码

<li class="sub menuout" onMouseOver="this.className='menuover'" onMouseOut="this.className='menuout'">
<a  href="/imgrank" id="imgrank" class="submenutitle">真相</a>
<a href="/imgrank" class="submenu">硬菜</a>
<a href="/pic" class="submenu">时令</a>
</li>

这段代码轻易的实现了,鼠标移到<li>上去,显示<a>子菜单,鼠标移走子菜单隐藏的功能

大部分浏览器都没有问题,除了总是出意外的IE6

在IE6中子菜单能正常显示,但是当鼠标移动到第2个<a>时,菜单不听话的消失了


解决办法:

经过反复测试,反复百度谷歌以后,发现要把<a>的宽度设置为100%,我们这里只要设置submenu的宽度为100%

.submenu{font-size:14px;width:100%}

原因:

只能猜测是IE6下<a>的宽度不能自动充满整个li,鼠标移过找不到焦点吧