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>
...全文
383 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿弥陀佛 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>
二级下拉菜单(支持IE6)
二级下拉菜单(支持IE6)，需要一个js文件
支持FF、IE6下很实用的三级下拉菜单
支持FF、IE6下面很实用的三级下拉菜单
解决IE6下三级下拉菜单被select遮挡的问题.docx
解决IE6下三级下拉菜单被select遮挡的问题
纯CSS的下拉菜单,支持IE6,IE7,Firefox
纯CSS的下拉菜单 支持IE6,IE7,Firefox
纯div+css下拉菜单支持ie6，ie7、火狐
收集的几个纯div+css下拉菜单或是带二级栏目的导航吧，支持ie6、ie7、火狐等浏览器。
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章