I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without it disappearing. Can anyone provide assistance with this problem?
Here is the link to the fiddle:
<style>
.container {
width: 200px;
position: relative;
display: inline-block;
}
.dropdown{
position:absolute;
left:0px;
width:250px;
top:18px;
background-color:#c03;
height:100px;
display:none;
}
</style>
<script>
$(document).ready(function(){
$(".menuItem").hover(function(){
$(".dropdown").show();
}, function(){
$(".dropdown").hide();
});
});
</script>
<div class="container">
<div class="wrap">
<a href="#" class="menuItem">Menu Item</a>
<div class="dropdown">
asasasasa
</div>
</div>
</div>