I am currently working on a navigation list with a dropdown menu that should expand downwards and upwards when hovered over. While the .slideUp() function is working perfectly fine, the issue arises with the .slideDown() animation not functioning as expected.
$('.dropdownLink').hover(function(e) {
e.preventDefault();
$('#dropdown').slideDown(900, function() {
$('#dropdown').css("visibility", "visible");
});
}, function() {
$('#dropdown').slideUp(900, function() {
$('#dropdown').css("visibility", "hidden");
});
});#dropdown {
display: flex;
justify-content: space-around;
flex-direction: column;
padding-top: 10px;
visibility: hidden;
}
#dropdown li {
margin-top: 13px;
}
#dropdown li a {
font-size: 0.9em;
padding: 3px 3px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a>
<ul id="dropdown">
<li><a class="link" href="#">Model S</a></li>
<li><a class="link" href="#">Model 3</a></li>
<li><a class="link" href="#">Model X</a></li>
<li><a class="link" href="#">Cybertruck</a></li>
<li><a class="link" href="#">Roadster</a></li>
<li><a class="link" href="#">Energy</a></li>
</ul>
</li>
<li><a class="link" href="#">About</a></li>
<li><a class="link" href="#">Order</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</nav>