Jak mogę wyrównać div pod innym?

Question

Utworzyłem menu rozwijane w Jquery i działa idealnie, ale mam tylko jeden problem z pozycjonowaniem menu. Stworzyłem menu zaraz po tym, jak dowiedziałem się o animacjach jQuery i nadal jestem początkującym, więc nie poszedłem za tutorialami.

Więc zastanawiałem się, jak mogę umieścić menu tuż pod przyciskiem?

<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> 

Menu ustawia się pod przyciskiem przy użyciu pozycji absolutnej.

Oto jak strona wygląda natomiast pełnym ekranie:

Oto jak strona wygląda natomiast okienkowym:

Chciałbym dowiedzieć się, jak to zrobić z jQuery/JScript lub CSS .

Answer 1

masz ten problem, ponieważ menu jest pozycjonowane w stosunku do body, tak, że szerokość okna zmienia pozycję menu. Aby rozwiązać ten problem, chcesz umieścić link i menu w elemencie z position: relative na nim.

Będzie to oznaczać, że można absolutna pozycja menu Twój względem pojemnika jej. Więc coś

<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> 

Oczywiście, że lepiej nie używać styli inline a zamiast tego zastosować klasę do pojemnika

Answer 2

nav owijane i menu div w div i zastosować położenia względem wyniku której pozycja menu div będzie działać odpowiednio:

<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; 
}