Javascript 如何将一个div与另一个div对齐？

我在Jquery中创建了一个下拉菜单，它工作得很好，但我对菜单的定位只有一个问题。我在学习了jquery动画之后就创建了这个菜单，我还是一个初学者，所以我没有学习任何教程

所以我想知道我怎样才能把菜单放在按钮下面

<div id="nav" class="grid_5">
    <a href=""> ABOUT </a>
    <a id="products" href=""> PRODUCTS </a>
    <a href=""> HOME </a>
</div>
<div id="menu">
    <a class="menuButton" href=""> Cakes </a><br>
    <a class="menuButton" href=""> Cupcakes </a><br>
    <a class="menuButton" href=""> Fudges </a><br>
    <a class="menuButton" href=""> Ice Creams </a><br>
    <a class="menuButton" href=""> Hard Candies </a>
</div>

使用绝对位置在按钮下方设置菜单

以下是全屏显示时网站的外观：

以下是打开窗口时网站的外观：

---

我想学习如何使用JQuery/JScript或CSS实现这一点。

将nav和menu div包装在一个div中，并应用menu div位置相应的相对位置：

<div class="relative">
<div id="nav" class="grid_5">
    <a href=""> ABOUT </a>
    <a id="products" href=""> PRODUCTS </a>
    <a href=""> HOME </a>
</div>
<div id="menu">
    <a class="menuButton" href=""> Cakes </a><br>
    <a class="menuButton" href=""> Cupcakes </a><br>
    <a class="menuButton" href=""> Fudges </a><br>
    <a class="menuButton" href=""> Ice Creams </a><br>
    <a class="menuButton" href=""> Hard Candies </a>
</div>
</div>

---

出现此问题的原因是菜单相对于

主体的位置发生变化，因此当窗口宽度改变时，菜单的位置也会移动。要解决此问题，您需要将链接和菜单放置在一个元素中，该元素上有
位置：relative

这意味着您可以相对于其容器对菜单进行绝对定位。大概是

<div style="position: relative">
    <div id="nav" class="grid_5">
        <a href=""> ABOUT </a>
        <a id="products" href=""> PRODUCTS </a>
        <a href=""> HOME </a>
    </div>
    <!-- When you position this absolutely it will now be relative to the container -->
    <div id="menu">
        <a class="menuButton" href=""> Cakes </a><br>
        <a class="menuButton" href=""> Cupcakes </a><br>
        <a class="menuButton" href=""> Fudges </a><br>
        <a class="menuButton" href=""> Ice Creams </a><br>
        <a class="menuButton" href=""> Hard Candies </a>
    </div>











显然，最好不要使用内联样式，而是对容器应用一个类
，提供当前正在创建该位置的CSS会有所帮助。很抱歉，我忘记了。但问题还是得到了回答。谢谢：）我把这个职位申请到了集装箱部门
<div style="position: relative">
    <div id="nav" class="grid_5">
        <a href=""> ABOUT </a>
        <a id="products" href=""> PRODUCTS </a>
        <a href=""> HOME </a>
    </div>
    <!-- When you position this absolutely it will now be relative to the container -->
    <div id="menu">
        <a class="menuButton" href=""> Cakes </a><br>
        <a class="menuButton" href=""> Cupcakes </a><br>
        <a class="menuButton" href=""> Fudges </a><br>
        <a class="menuButton" href=""> Ice Creams </a><br>
        <a class="menuButton" href=""> Hard Candies </a>
    </div>