javascript - 创建当我们将鼠标悬停在菜单项上时出现的全宽下拉菜单时出现的问题(使用 jQuery)

Question

(到目前为止，这里的其他问题都没有帮助)。当我们将鼠标悬停在父菜单项上时，我需要显示下拉菜单，并且只要我将鼠标悬停在父菜单项或下拉菜单本身上，下拉菜单就保持在那里。

在下面的代码中，您可以看到我尝试通过 jQuery 处理下拉菜单的两种不同方法。我的代码中有两个下拉菜单。我没有使用 ul 和 li，因为我想以不同的方式设计它，所以我只需要隐藏和显示下拉菜单 div，但当我将鼠标悬停在它而不是小菜单项上时，我很难将其保留在那里。

jQuery:

$(document).ready(function(){  
$("#hover-industries").hover(function(){
        $("#drop-industries").css("display", "flex");
        }, function(){
          $("#drop-industries").hide();
    });
});

$(document).ready(function(){   
$("#hover-services").hover(function(){
        $("#drop-services").css("display", "flex");
                }, function() { 
                    $("#drop-services").css("display", "none");
        }); 

});

CSS:

        body{
            background-color: aqua;
        }      
        #big-top-menu{
            display: flex;
            justify-content: space-around;
            background-color: antiquewhite;
        }
        #big-top-menu h3{
            height: 100%;
        }
        #drop-industries{
            display: none;
            background-color: white;
            flex-direction: column;
        }
        #drop-services{
            display: none;
            background-color: white;
            flex-direction: column;
        }

HTML:

<div id="menu-and-drop">
<div id="big-top-menu">
   <div id="hover-industries">
       <h3 id="industries-title"><a href="#">Industries</a></h3>
    <div id="drop-industries" class="one-drop">
        <a href="#">Automotive Industry</a>
        <a href="#">Biopharmaceuticals</a>
        <a href="#">Consumer Products</a>
        <a href="#">Education</a>
        <a href="#">Energy and Environment</a>
        <a href="#">Engineering Products <br>and Infrastructure</a>
    </div>
   </div>

   <div id="hover-services">
       <h3 id="services-title"><a href="#">Services</a></h3>
        <div id="drop-services" class="one-drop">
        <a href="#">Analytics</a>
        <a href="#">Corporate Finance</a>
        <a href="#">Customer Strategy</a>
        <a href="#">Information Technology</a>
        <a href="#">Operators</a>
        <a href="#">Performance Enhancement</a>
    </div>
   </div>
</div>

Answer 1

处理这个问题的一种方法是绝对定位下拉菜单，这样您就不会将鼠标移出大顶部菜单，这样下拉菜单就不会消失。

这是您的代码片段，其中 css 稍作更改

position: absolute;
top: 50px;

在两个下拉菜单上

$(document).ready(function(){  
$("#hover-industries").hover(function(){
        $("#drop-industries").css("display", "flex");
        }, function(){
          $("#drop-industries").hide();
    });
});

$(document).ready(function(){   
$("#hover-services").hover(function(){
        $("#drop-services").css("display", "flex");
                }, function() { 
                    $("#drop-services").css("display", "none");
        }); 

});

        body{
            background-color: aqua;
        }      
        #big-top-menu{
            display: flex;
            justify-content: space-around;
            background-color: antiquewhite;
        }
        #big-top-menu h3{
            height: 100%;
        }
        #drop-industries{
            display: none;
            position: absolute;
            top: 50px;
            background-color: white;
            flex-direction: column;
        }
        #drop-services{
            display: none;
            position: absolute;
            top: 50px;
            background-color: white;
            flex-direction: column;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="menu-and-drop">
   <div id="big-top-menu">
      <div id="hover-industries">
         <h3 id="industries-title"><a href="#">Industries</a></h3>
         <div id="drop-industries" class="one-drop">
            <a href="#">Automotive Industry</a>
            <a href="#">Biopharmaceuticals</a>
            <a href="#">Consumer Products</a>
            <a href="#">Education</a>
            <a href="#">Energy and Environment</a>
            <a href="#">Engineering Products <br>and Infrastructure</a>
         </div>
      </div>

      <div id="hover-services">
         <h3 id="services-title"><a href="#">Services</a></h3>
         <div id="drop-services" class="one-drop">
            <a href="#">Analytics</a>
            <a href="#">Corporate Finance</a>
            <a href="#">Customer Strategy</a>
            <a href="#">Information Technology</a>
            <a href="#">Operators</a>
            <a href="#">Performance Enhancement</a>
         </div>
      </div>
   </div>
</div>