单击时如何将 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(&nbsp; function() {&nbsp; &nbsp; &nbsp;$("#menu").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#submenu").toggle(1000);&nbsp; &nbsp; &nbsp;});&nbsp;});a {&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; text-decoration: none;}#menu {&nbsp; text-align: right;}#menu a {&nbsp; &nbsp; background:#000000;&nbsp; &nbsp; padding: 14px;&nbsp; &nbsp; display: inline-block;}#submenu {&nbsp; &nbsp; display: none;&nbsp; &nbsp; width: 90%;&nbsp; &nbsp; background: green;&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; padding: 14px;&nbsp; &nbsp; 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>