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(){
        //...
    });
});

<强>更新：May be you want this

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不是必需的。如果你的subnav不在主导航内，那么jQuery对于切换其可见性非常有用。

导航菜单无法正常工作

2 个答案: