单击时如何将 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>