(None of the other questions here helped so far). I need the drop-down menu to appear when we hover over the parent menu item, and stay there as long as I am hovering over the parent menu item OR the drop-down menu itself.
In the code below, you can see two different ways I tried to deal with the drop-down menu through jQuery. There are two drop menus in my code. I am not using ul and li because I want to style it differently, so I just need to hide and show the drop menu div, but I am having trouble keeping it there when I am hovering over it instead of the small menu item.
The 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");
});
});
The 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;
}
The 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>
One way to handle it is to position the drop menus absolutely, so that you don't mouse out of the big-top-menu so the dropdown doesn't disappear.
Here's your code in a snippet with a little css change of
position: absolute;
top: 50px;
on both of the dropdowns
$(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>
I see your handleOut function is missing the }
$("#hover-industries").hover(function(){
$("#drop-industries").css("display", "flex");
},
function(){
$("#drop-industries").hide();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.