我找到一段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>

解决方案 »

  1.   

    上次的改了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>
      

  2.   

    没引用jquery 直接按你上面改的, 在你另个贴里
    http://bbs.csdn.net/topics/390364321?page=1#post-393650226
     
      

  3.   

    感谢fzfei2 !果然是高手!在下学习了不少!分都给您!不成敬意!