如何将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>

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

Answer 2

在div中包裹导航和菜单div并应用菜单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>

的CSS：

.relative{
   position: relative;
}