創建鼠標懸停在菜單項上時出現的全角下拉菜單時出現問題（使用jQuery）

Question

（到目前為止，這里的其他問題都沒有幫助）。 當我們將鼠標懸停在父菜單項或下拉菜單本身上時，我需要在下拉菜單中顯示並停留在那。

在下面的代碼中，您可以看到我嘗試通過jQuery處理下拉菜單的兩種不同方式。 我的代碼中有兩個下拉菜單。 我沒有使用ul和li，因為我想用不同的樣式設置，所以我只需要隱藏和顯示下拉菜單div，但是當我將鼠標懸停在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> 

Answer 2

我看到您的handleOut函數缺少}

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