Question

我第一次尝试使用jQuery在花哨的下拉菜单上努力工作。我已经让菜单正常显示主菜单项和子菜单下拉列表。但是，只要我想将鼠标悬停在任何子菜单项上以便能够单击并运行相关页面，srop-down子菜单就会消失。我无法进入子菜单项的导航。可以单击主菜单项并正确打开。

有人可以帮忙吗？以下是我的代码更具体（当然只有相关的代码片段）

index.html有以下内容 -

<body nload="MM_preloadImages('menu_home.gif','menu_profile.gif','menu_contactus.gif')">
<div id="wrap">
<div id="container">

<div id="menuNav">
<div id="homeMenu">
<div><img src="homeMenu_dropdown-top.png" alt="" border="0" /></div>
<div class="submenu-beg">
     <ul id="subMenuNav1">       
        <li class="firstItem"><a href="about.html">About Us</a></li>
        <li><a href="shining_stars.html">Shining Stars</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
     </ul>         
 </div> 
<div class="submenu-bot"></div>
</div>

/ *下面是一些菜单项及其子菜单，并非所有主菜单项都有子菜单* /

  ......
  ......
  ......
  ....

    <!-- End of Drop Down Menu --> 
    <ul>
    <li><a href="home.html" onmouseout="MM_swapImgRestore()" 
    onmouseover="MM_swapImage('Image1','','menu_home.gif',1)"><img src="home.gif" 
    name="Image1" width="110" height="45" border="0" id="Image1" alt="" /></a></li>    
    <li><a href="profile.html" onmouseout="MM_swapImgRestore()" 
    onmouseover="MM_swapImage('Image2','','menu_profile.gif',1)"><img src="profile.gif" 
    name="Image2" width="87" height="45" border="0" id="Image2" alt="" /></a></li>
    <li><a href="contact.html" onmouseout="MM_swapImgRestore()" 
    onmouseover="MM_swapImage('Image3','','menu_contactus.gif',1)">
    <img src="contactus.gif" 
    name="Image3" width="117" height="45" border="0" id="Image3" alt="" /></a></li>
        </ul>     
    </div>

我的CSS文件包含上述ID和类的详细信息 -

    #wrap {width:980px; margin: 0 auto;}

    #container{
    width:980px;
    margin:0 auto;
    background: url(body-top-bg.jpg) top center no-repeat;
    }

    #menuNav
    {
    width:100%;
    height:45px;    
    padding:0px 0 0px 0;
    margin:0px auto;
   }

   #homeMenu{
    position:absolute; 
    display:none; 
    width:200px;
    height:auto; 
    margin:45px 0px 0px 0px;
    padding:0;
    overflow:hidden;
    z-index:999;
    }

    .sibmenu-beg{
    width:190px;
    float:left;
    overflow:hidden;
    background:#333333;
    border-left:#929292 solid 5px;
    border-right:#929292 solid 5px; 
    }
    .submenu-bot{
    width:200px;
    float:left;
    height:16px;
    background:url(small-menu-bottom.png) no-repeat;    
    }
    .submenu-beg ul{
    padding:0px;
    margin:0px;
    list-style-type:none;   
    }
    #subMenuNav1 > li, #subMenuNav2 > li, #subMenuNav6 > li 
    {
    font-family:century gothic;
    color: #bebebe;
    font-size:14px; 
    text-align:left;
    width:200px;
    border-top:#424242 solid 1px;
    border-bottom:#1f1f1f solid 1px;    
    }
    #subMenuNav1 > li.firstItem, #subMenuNav2 > li.firstItem, 
      #subMenuNav6 > li.firstItem
    {
    font-family:century gothic;
    color: #bebebe;
    font-size:14px; 
    text-align:left;
    width:200px;
    border-top:#ff0000 solid 0px;
    }
    #subMenuNav1 > li a, #subMenuNav2 > li a, #subMenuNav6 > li a {
    font-family:century gothic;
    color: #bebebe;
    font-size:14px;
    padding:8px 0 6px 10px;
    display:block;
    width:200px;
    text-decoration:none;
    min-height:20px;        
    }

    #subMenuNav1 > li a:hover, #subMenuNav2 > li a:hover, #subMenuNav3 > li a:hover,
      #subMenuNav4 > li a:hover, #subMenuNav5 > li a:hover, #subMenuNav6 > li a:hover {
    color: #fff;
    text-decoration:none;       
    }

我的代码出了什么问题？任何帮助将不胜感激。我是jQuery的新手，我自己学习它。我确实有CoreJava的背景但是在初级。我非常感谢任何帮助。

谢谢你的支持！

主菜单项正确显示下拉子菜单，但不允许单击任何子菜单项

0 个答案: