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>
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

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