如何使下拉菜单在悬停时保持打开状态，并在离开时消失

Question

我真的需要帮助。 我尝试过，但仍然无法正常工作。 我想创建一个下拉菜单，该菜单将出现在悬停时，离开该下拉菜单时将消失。

 $(document).ready(function(){ $('.navigation-menu').mouseenter(function(){ $('.navigation-dropdown').addClass('visible'); }); $('.navigation-dropdown').mouseleave(function(){ $('.navigation-dropdown').removeClass('visible'); }); }); 

 ul{ margin: 0; } .container{ background-color: rgb(0,0,0); height: 30px; padding: 10px; } .container-dropdown{ background-color: rgb(125,125,125) } .dropdown-menu{ display: inline-block; } .navigation-dropdown{ display: none; } .navigation-menu{ display: inline-block; height: 100%; } .visible{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="header"> <div class="container"> <img src="" alt=""> <div class="navigation"> <ul> <li class="navigation-menu"><a href="">home</a></li> <li class="navigation-menu"><a href="">home</a></li> <li class="navigation-menu"><a href="">home</a></li> </ul> </div> </div> <div class="navigation-dropdown"> <div class="container-dropdown"> <ul> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> </ul> </div> </div> </header> 

因此，当我移动鼠标离开导航菜单类时，我只想使该灰色div消失

我的问题：我必须先将鼠标移至灰色div，以使灰色div消失。 我想要的是使灰色div消失，而无需先将鼠标移至灰色div

Answer 1

有许多更好的设计选项供您期待，以获取所需的东西。 但是，如果您只想坚持当前的布局和设计，我将进行一些更改以获取所需的内容。

.container{
  background-color: rgb(0,0,0);
  height: 20px;
  padding: 10px;
  padding-bottom: 0px; --to remove any space between menu title and the dropdown
}

和

$(document).ready(function(){
    $('.navigation-menu').mouseenter(function(){
    $('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
    $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-dropdown').mouseenter(function(){
      $('.navigation-dropdown').addClass('visible');
  });

  $('.navigation').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-menu').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });
});

如果鼠标离开navigation div，则隐藏下拉菜单。

希望这可以帮助。