Как выровнять div, чтобы плавать / зависать снизу при нажатии?

Question

Я пытаюсь сделать меню, при нажатии на которое должно появиться подменю внизу. Но, к сожалению, в моем коде оно появляется справа налево, а затем идет вниз.

Мой код,

<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>

Answer 1

Удалите float:right из элемента #menu, чтобы он занял все горизонтальное пространство и переместил фон и отступ к внутренней ссылке

$(document).ready(
  function() {
     $("#menu").click(function() {
         $("#submenu").toggle(1000);
     });
 }
);

a {
    color: #ffffff;
    text-decoration: none;
}

#menu {
  text-align: right;
}
#menu a {
    background:#000000;
    padding: 14px;
    display: inline-block;
}
#submenu {
    display: none;
    width: 90%;
    background: green;
    color: #ffffff;
    padding: 14px;
    float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="menu"><a class="limbo" href="#">MENU</a></div>
<div id="submenu"><a href="#">SUB MENU</a></div>