jquery - 悬停在第一级后到达第二级菜单的问题

Question

HTML:

<ul class="main_menu">
  <li id="homebutton"> <a href="#">Home </a></li>
  <li id="servicebutton"> <a href="#" >Services </a></li>
  <li id="packagebutton"> <a href="#" >Packages </a></li>
  <li id="spabutton"> <a href="#">The spa </a></li>
  <li id="productbutton"> <a href="#">Product </a></li>
  <li id="mebutton"> <a href="#">About Me </a></li>
  <li id="contactbutton"> <a href="#">Contact </a></li>
              <div class="submenu">
              <div id="services_menu" class="active">
              <ul>
                <li>Services1</li>
                <li>Services2</li>
                <li>Services3</li>
                <li>Services4</li>
                <li>Services5</li>
              </ul>
              </div>
              <div id="packages_menu">
              <ul>
                <li>Packages1</li>
                <li>Packages2</li>
                <li>Packages3</li>
                <li>Packages4</li>
                <li>Packages5</li>
              </ul>
              </div>    
              </div>
</ul>

CSS:

ul.main_menu  {list-style-type: none; text-align: center;background-color:yellow;}
ul.main_menu li  {margin-left: 20px; display: inline; background-color:red;}
ul.main_menu li a  {text-decoration: none;color: white;}
.submenu  {height: 20px;width: 100%;}
#services_menu  {display: none;margin-top: 10px;}
#services_menu ul {list-style-type: none; text-align: center;}
#services_menu ul li  {margin-left: 20px; display: inline;}
#service_menu ul li a  {text-decoration: none; color: white;}
#packages_menu  {display: none; margin-top: 10px;}
#packages_menu ul {list-style-type: none; text-align: center;}
#packages_menu ul li  {margin-left: 20px; display: inline;}
#packages_menu ul li a  {text-decoration: none; color: white;}
.active {display: block!important;}

Jquery:

jQuery("#packagebutton").hover(
        function () {
            jQuery('#services_menu').removeClass( "active" );
            jQuery('#packages_menu').addClass("active");
        }, 
        function () {
            jQuery('#packages_menu').removeClass("active");
            jQuery('#services_menu').addClass( "active" );
        }
);

当我将鼠标悬停在第一层时，我正在创建一个导航，但之后当我将鼠标指针移动到第二层时，第二层消失。

代码或 html 中的哪些更改可以帮助我解决此问题？

DEMO HERE

Answer 1

我在这里更新了你的脚本，请看这个:

$(document).ready(function(){
  $("#packagebutton").mouseenter(function(){
    if(!$(this).hasClass('active')){
        $('#services_menu').removeClass( "active" );
        $('#packages_menu').addClass("active");
    }
  });
  $("#packagebutton").mouseleave(function(){
    if(!$(this).hasClass('active')){
        $('#services_menu').addClass("active");
        $('#packages_menu').removeClass("active");
    }
  });
})

演示链接:http://jsfiddle.net/jkkheni/7VpyY/14/