100分求修改js：关于ie6下hover的下拉菜单问题

阿弥陀佛 2013-02-04 07:43:25
我找到一段js，实现在IE6下拉菜单效果，是网上典型的一个例子。但是，鼠标一离开主菜单，下拉子菜单就消失了。对于js，我一知半解，望js高手帮我看看，问题在哪里，怎么修改js，或者还是我的css写的有问题？望指教，感谢了，先。

（该css下拉菜单在IE7以上和其他浏览器均完美支持）







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>一个很不错的下拉导航菜单</title>



<style type="text/css">

<!--

#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}

#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}

#navParent ul a{color:#ffffff;font-size:12px;}        

#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}

#navParent li ul {display: none;  position:absolute; left:0px}

#navParent li ul li{width:230px;text-align:left;}

#navParent li:hover ul, li.over ul {display: block;}

#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}

#navParent ul li a:hover{background-color:#076bb9;}

-->

</style>

<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("navParent").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>



</head>



<body>



<div id="navParent">

<ul>

  <li><a href="">Computers</a>

    <ul>

      <li><a href="">Computer Parts</a></li>

      <li><a href="">USB Flash Memory</a></li>

      <li><a href="">Batteries</a></li>

      <li><a href="">USB data cable</a></li>

	  <li><a href="">Computer Hardware</a></li>

	  <li><a href="">Earphone</a></li>

	  <li><a href="">Remote Storage</a></li>

	</ul>

	</li>



  <li><a href="">Electronics </a>

    <ul>

      <li><a href="">GPS</a></li>

	  

      <li><a href="">Bluetooth Carkits</a></li>

      <li><a href="">Cell phones</a></li>

      <li><a href="">MP3/MP4</a></li>

	  <li><a href="">Digital Cameras</a></li>  

	</ul>

	</li>

	

	<li><a href="">Toys</a>

    <ul>

      <li><a href="">Games</a></li>

      <li><a href="">Remote Control Toys</a></li>

      <li><a href="">Toys by Ages</a></li>

     </ul>

	</li>

	

	<li><a href="">Cameras</a>

    <ul>

      <li><a href="">Digital Cameras</a></li>

      <li><a href="">Camcorders</a></li>

      <li><a href="">Batteries</a></li>

      <li><a href="">Memory Cards</a></li>  

	</ul>

	</li>

	

	<li><a href="">CellPhones </a>

    <ul>

      <li><a href="">Free Cellphones with Plans</a></li>

      <li><a href="">Refurbished cellphones</a></li>

      <li><a href="">Prepaid Refills</a></li>

      <li><a href="">Free Ringtones</a></li>

	  <li><a href="">Cellphone Accessories</a></li>  

	</ul>

	</li>

	

	<li><a href="">Batteries </a>

    <ul>

      <li><a href="">Cellphone Batteries</a></li>

	  <li><a href="">Laptop Batteries</a></li>

      <li><a href="">Digital Camera Batteries</a></li>

      <li><a href="">Camcorder Batteries</a></li>

	  <li><a href="">PDA Batteries</a></li>

	  <li><a href="">Ipod/MP3 Batteries</a></li>

	  <li><a href="">Others</a></li>

	</ul>

	</li>

	

	<li><a href="">Video Games</a>

    <ul>

      <li><a href="">Wii</a></li>

	  <li><a href="">Xbox 360</a></li>

      <li><a href="">PlayStation 2/PS 2</a></li>

      <li><a href="">Nintendo DS</a></li>

	  <li><a href="">PlayStation 3/PS 3</a></li>

	  <li><a href="">PSP</a></li>

	  <li><a href="">PC games</a></li>	 

  	  <li><a href="">Game Console</a></li>	  

	  <li><a href="">Accessories</a></li>	

	</ul>

	</li>

</ul>

</div>



</body>

</html>
...全文
276 4 点赞 打赏 收藏 举报
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年，不再开放新的回复
发表回复
阿弥陀佛 2013-02-04
为了 这个菜单的兼容性问题，前前后后折腾了我一周多时间了，连lP孩子都冷落了不少！ 知识真的很重要啊！ 继续向下一个目标前进！！！
  • 打赏
  • 举报
 回复 赞
阿弥陀佛 2013-02-04
感谢fzfei2 ！果然是高手！在下学习了不少！ 分都给您！不成敬意！
  • 打赏
  • 举报
 回复 赞
fzfei2 2013-02-04
没引用jquery 直接按你上面改的, 在你另个贴里 http://bbs.csdn.net/topics/390364321?page=1#post-393650226
  • 打赏
  • 举报
 回复 赞
fzfei2 2013-02-04
上次的改了BUG ，你试试 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个很不错的下拉导航菜单</title>

<style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}        
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none;  position:absolute; left:0px; }
#navParent li ul li{width:230px;text-align:left;}

/* #navParent li:hover ul, li.over ul {display: block;} */
#navParent ul li a {background-color:#3591da;
   padding:7px; 
   border-bottom:1px white solid;text-decoration: none;
   display:block;font-weight: bolder;
  }
#navParent ul li ul a {background-color:#3591da;  padding:0px;  width:100%;  line-height:25px; height:25px; padding-left:7px; }
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<div id="navParent">
<ul>
  <li><a href="">Computers</a>
    <ul>
      <li><a href="">Computer Parts</a></li>
      <li><a href="">USB Flash Memory</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">USB data cable</a></li>
	  <li><a href="">Computer Hardware</a></li>
	  <li><a href="">Earphone</a></li>
	  <li><a href="">Remote Storage</a></li>
	</ul>
	</li>

  <li><a href="">Electronics </a>
    <ul>
      <li><a href="">GPS</a></li>
	  
      <li><a href="">Bluetooth Carkits</a></li>
      <li><a href="">Cell phones</a></li>
      <li><a href="">MP3/MP4</a></li>
	  <li><a href="">Digital Cameras</a></li>  
	</ul>
	</li>
	
	<li><a href="">Toys</a>
    <ul>
      <li><a href="">Games</a></li>
      <li><a href="">Remote Control Toys</a></li>
      <li><a href="">Toys by Ages</a></li>
     </ul>
	</li>
	
	<li><a href="">Cameras</a>
    <ul>
      <li><a href="">Digital Cameras</a></li>
      <li><a href="">Camcorders</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">Memory Cards</a></li>  
	</ul>
	</li>
	
	<li><a href="">CellPhones </a>
    <ul>
      <li><a href="">Free Cellphones with Plans</a></li>
      <li><a href="">Refurbished cellphones</a></li>
      <li><a href="">Prepaid Refills</a></li>
      <li><a href="">Free Ringtones</a></li>
	  <li><a href="">Cellphone Accessories</a></li>  
	</ul>
	</li>
	
	<li><a href="">Batteries </a>
    <ul>
      <li><a href="">Cellphone Batteries</a></li>
	  <li><a href="">Laptop Batteries</a></li>
      <li><a href="">Digital Camera Batteries</a></li>
      <li><a href="">Camcorder Batteries</a></li>
	  <li><a href="">PDA Batteries</a></li>
	  <li><a href="">Ipod/MP3 Batteries</a></li>
	  <li><a href="">Others</a></li>
	</ul>
	</li>
	
	<li><a href="">Video Games</a>
    <ul>
      <li><a href="">Wii</a></li>
	  <li><a href="">Xbox 360</a></li>
      <li><a href="">PlayStation 2/PS 2</a></li>
      <li><a href="">Nintendo DS</a></li>
	  <li><a href="">PlayStation 3/PS 3</a></li>
	  <li><a href="">PSP</a></li>
	  <li><a href="">PC games</a></li>	 
  	  <li><a href="">Game Console</a></li>	  
	  <li><a href="">Accessories</a></li>	
	</ul>
	</li>
</ul>
</div>
 <script>
  top.name='ok';
  $('#navParent>ul>li').hover(
    function(){
       $(this).find('ul').show()    
    },
    function(){
 
       $(this).find('ul').hide()    
    }
  );
 
	
  
  
</script>
</body>
</html>
  • 打赏
  • 举报
 回复 赞
相关推荐
瓮安县张家坡公共租赁住房项目初步设计说明115-v2.docx 瓮安县张家坡公共租赁住房项目初步设计说明115-v2.docx
AD9516_17_18 Eval Software 时钟芯片AD9516,AD9517,AD9518的寄存器配置软件
Matlab火灾烟雾检测火焰检测 课题为基于MATLAB的火焰识别。可以作为火灾检测的课题。火焰原理是根据火苗颜色特征，将彩色图像的每个像素都转化为RGB三个通道，然后符合一定比例关系的像素，就是火苗区域，然后结合形态学，去除干扰区域，留下火焰区域，框定，可以进行阈值设定，进行火灾报警。带界面GUI框架。需要您具备一定基础。
PyPI 官网下载 | pretextbook-0.5.0rc0-py3-none-any.whl 资源来自pypi官网。 资源全名：pretextbook-0.5.0rc0-py3-none-any.whl
孩子们在游戏中得到的不仅仅是快乐.doc 孩子们在游戏中得到的不仅仅是快乐.doc
私车公用车辆出租协议.pdf 私车公用车辆出租协议.pdf
孩子的早期培养1.doc 孩子的早期培养1.doc
我严格要求自己作文.doc 我严格要求自己作文.doc
一下U3第二课时let'splay.doc 一下U3第二课时let'splay.doc
开发利用金属矿物和海水资源【高一化学下册《开发利用金属矿物和海水资源》的知识点归.pdf 开发利用金属矿物和海水资源【高一化学下册《开发利用金属矿物和海水资源》的知识点归.pdf
热固性碳纤维预浸料行业调研 热固性碳纤维预浸料行业调研
VMware-Tools-darwin-11.3.5-18557794.zip 用于VMware解锁Mac OS全屏及优化性能 资源内容：VMware Tools packages for macOS 系统支持：These packages support the following operating systems: macOS 10.11 and later 资源版本：2022年2月为止官网最新版（下载需要VMware有效账号） Release Date: 2021-09-23 Build Number: 18557794 MD5SUM: 7666dbc676cbabdfc0d2e20d5c722a5b SHA1SUM: 8c28ab613c083edfc42c10076aee48b927345e67 SHA256SUM: 27e7438e6ba8d32192b4991c0f39a50b1a5e43c4f61345b3d18f6b6804193c93 Release Notes: https://docs.vmware.com/en/VMware-Tools/11.3/rn/VMware-Tools-1135-Release-Notes.html
长春瑞宾药物行业调研及趋势分析报告 长春瑞宾药物行业调研及趋势分析报告
毕业生自我鉴定 大专医学生毕业生自我鉴定.pdf 毕业生自我鉴定 大专医学生毕业生自我鉴定.pdf
Leapmotion小游戏 里面有两个小游戏
热塑性碳纤维预浸料行业调研 热塑性碳纤维预浸料行业调研
证券从业《金融市场基础知识》第五章第二节-5.pdf 证券从业《金融市场基础知识》第五章第二节-5.pdf
第九次课 - 自动测试系统.ppt 第九次课 - 自动测试系统.ppt
Matlab火灾烟雾检测源码.zip 课题为基于MATLAB的火焰识别。可以作为火灾检测的课题。火焰原理是根据火苗颜色特征，将彩色图像的每个像素都转化为RGB三个通道，然后符合一定比例关系的像素，就是火苗区域，然后结合形态学，去除干扰区域，留下火焰区域，框定，可以进行阈值设定，进行火灾报警。带界面GUI框架。需要您具备一定基础。
瓦斯监控系统应急预案.docx 瓦斯监控系统应急预案.docx
发帖
JavaScript
加入

8.5w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-02-04 07:43
社区公告
暂无公告