如何将div对齐另一个？

Question

我在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.

Answer 1

您遇到这个问题是因为菜单的位置是相对于的，body因此随着窗口宽度的变化，菜单的位置也会移动。为了解决这个问题，您需要将链接和菜单放置在一个元素中position: 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>

显然最好不要使用内联样式，而是将类应用于容器