jQuery：悬停在子菜单项上方时，保持子菜单打开

Question

This has been asked a lot. But I can't seem to find a solution that works. I have a jQuery code that opens my submenu on hover, but it vanishes after I try to go over the submenu items. How can I fix that?

Here's my code:

 $('.hover').hover( function() { $('.drop-box').show(); }, function() { $('.drop-box').hide(); }) }); 

 .drop-box { position: absolute; width: 100%; height: 60px; background: darkgreen; top: 60px; left: 0; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hover">hover</div> <div class="drop-box"> <div class="container row"> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> </div> </div> </div> 

Answer 1

Just place .drop-box and all its contents inside .hover . Plus, you need to remove the top property to prevent the gap between the text and the .drop-box .

 $('.hover').hover( function () { $('.drop-box').show(); }, function () { $('.drop-box').hide(); } ); 

 .drop-box { position: absolute; width: 100%; height: 60px; background: darkgreen; // top: 60px; left: 0; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hover">hover<div class="drop-box"> <div class="container row"> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> </div> </div> </div> 

UPDATE:

If you can't move .drop-box into .hover , you can wrap everything with a div and add the hover event using CSS:

 .drop-box { position: absolute; width: 100%; height: 60px; background: darkgreen; // top: 60px; left: 0; display: none; } .everything:hover .drop-box { display: block; } 

 <div class="everything"> <div class="hover">hover</div> <div class="drop-box"> <div class="container row"> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> <div class="col-md-4"> <p class="mb-0">Text</p> </div> </div> </div> </div>