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

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

最佳答案

在这里，我更新了您的脚本，请参见：

$(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/