您的位置：首页 > 网站优化 > css  >  【已验证】onMouseOver,onMouseOut在IE6下无法显示菜单的问题

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

 更新时间：2013年8月20日 22:56  点击：583

问题描述：

先看一段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，鼠标移过找不到焦点吧



[!--infotagslink--]

相关文章

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • jquery ready函数、css函数及text()使用示例

    .text更改内容 .css更改样式...2013-10-03

  • jQuery实现有动画淡出效果的二级折叠菜单代码

    本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考，具体如下：这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码，相当不错，因考虑功能的实现，所以没有怎么美化，不过这样也好，可以给大家更...2015-10-21

  • jQuery实现可关闭固定于底（顶）部的工具条菜单效果

    本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮...2015-11-08

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容也随着改...2015-10-30

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • jQuery实现下拉菜单滑动效果

    这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-09

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • 解决vue scoped scss 无效的问题

    这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04

  • Vue.js 递归组件实现树形菜单（实例分享）

    本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧...2017-01-09

  • jQuery实现精美的多级下拉菜单特效

    这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15

  • js如何构造elementUI树状菜单的数据结构详解

    由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13

  • jquery插件实现悬浮的菜单

    这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-23

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • JS实现不使用图片仿Windows右键菜单效果代码

    本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动，数据需要的字段有：id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级，则父id为0，若有上级，则父id为上一级的id。数据库有内容后，就可以开始写代码，进...2014-05-31