I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down.
Here is my code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("#menu").click(function() {
$("#submenu").toggle(1000);
});
});
</script>
<style>
a {
color: #ffffff;
text-decoration: none;
}
#menu {
background:#000000;
float:right;
padding: 14px;
}
#submenu {
display: none;
width: 90%;
background: green;
color: #ffffff;
float:right;
padding: 14px;
}
</style>
<div id="menu"><a class="limbo" href="#">MENU</a></div>
<div id="submenu"><a href="#">SUB MENU</a></div>