Come posso allineare un div al di sotto di un altro?

Question

Ho creato un menu a discesa in Jquery e funziona perfettamente, ma ho solo un problema con il posizionamento del menu. Ho creato il menu subito dopo aver appreso le animazioni di jQuery e sono ancora un principiante, quindi non ho seguito alcun tutorial.

Quindi mi chiedevo come posso mettere il menu proprio sotto il pulsante?

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

Il menu è impostato sotto il pulsante utilizzando una posizione assoluta.

Ecco come il sito appare mentre schermo intero:

Ecco come il sito appare mentre finestrata:

Vorrei imparare a fare questo con JQuery/JScript o CSS .

Answer 1

Stai avendo quel problema, perché il menu è in posizione relativa a body così come la larghezza della finestra cambia la posizione del menu si sposta. Per risolvere questo problema si desidera posizionare il collegamento e il menu in un elemento con position: relative su di esso.

Questo sarà quindi significa che non si può posizione assoluta vostro menu rispetto al contenitore la sua. Quindi qualcosa di simile

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

Ovviamente è meglio utilizzare gli stili inline e invece applicare una classe al contenitore

Answer 2

nav avvolgere e menù div in un div e applicare la posizione relativa con cui la tua posizione del menu div avrebbe funzionato di conseguenza:

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