jquery - 导航菜单无法正常工作

Question

我想创建一个导航菜单..

我为此使用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'});
        })
   });

但不能正常工作。有谁能够帮助我？提前致谢。

Answer 1

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

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

但应该是

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

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

更新：可能是你想要这个。

Answer 2

这是你可以做的，根本不包括 jQuery。

http://jsfiddle.net/qsENf/1/

我只包含了“关于”部分的 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 isn't necessary for this. If your subnav is not inside of the main nav then jQuery would be useful for toggling its visibility.