Jquery 导航菜单工作不正常

我想创建一个导航菜单

我使用jquery来实现这个

   $('.about').on('mouseenter', function(){
        $(this).css({'background':'#144f19'});
        $('.submenu_about').css({'display':'block', 'position':'absolute'});
        $('.items_list').on('mouseout', function(){
            $('.submenu_about').css({'display':'none', 'opacity':'0px'});
            $('.about').css({'background':'none'});
        })
   });

但工作不正常。有人能帮我吗？提前感谢。

可能不是答案（您没有提供足够的信息来理解问题），但您现在有了答案

$('.about').on('mouseenter', function(){
    //...
    $('.items_list').on('mouseout', function(){
        //...
    });
});

但应该是这样

​$(function(){
    $('.about').on('mouseenter', function(){
        //...
    });

    $('.items_list').on('mouseout', function(){
        //...
    });
});

---

更新：。

这里是您可以做的，而不包括jQuery

我只包含了“关于”部分的css，但是代码可以很容易地更改以处理任何项目。我不知道这是否是你想要的，但应该很接近。如果您想使用jQuery，那么您可以定义css类并使用jQuery添加它们，而不是更改所有元素的css

以下是css：

.submenu_about {
    display: none;
}

.about {
    background:transparent;
}
.about:hover {
    background:#144f19;
}

.about:hover .submenu_about {
   display: block;
}

以及html：

<div class="navigation_bar">
  <ul class="menu_list">
    <li class="a_menu_item about">
      About Us
      <div class="submenu_about">
        <ul class="items_list" style="list-style:none">
          <li class="a_sub_menu_item"><a href="#">News and Events</a></li>
          <li class="a_sub_menu_item"><a href="">Financial Assistance</a></li>
          <li class="a_sub_menu_item"><a href="">Who We See</a></li>
          <li class="a_sub_menu_item"><a href="">Insurance Information</a></li>
        </ul>
      </div>

    </li>
    <li class="a_menu_item theater">Theater</li>
    <li class="a_menu_item leader">Leadership Team</li>
    <li class="a_menu_item career">Careers</li>
    <li class="a_menu_item contact">Contact Us</li>
  </ul>
</div>

关于我们







剧院
领导团队
职业生涯
与我们联系

---

jQuery对此不是必需的。如果您的子导航不在主导航内，那么jQuery将有助于切换其可见性。

它是如何工作的？如果您希望我们在您不明确的情况下提供帮助，那么请在jsfiddle上设置一个示例。在我看来，您使用jquery所做的事情只能使用css来完成。如何仅使用css来实现？你能给我示例代码吗？保留

$（'.items_list'）。在（'mouseout'，function（）{…}）

之外的

$（'.about'）。在（'mouseenter'，function（）{…}）上哦，对不起，不是全部，但肯定有一部分可以在css中完成