javascript - How can I align a div right under another? -

javascript - How can I align a div right under another? -

i created drop-down menu in jquery , it's working have 1 problem positioning of menu. created menu right after learned jquery animations , i'm still beginner didn't follow tutorials.

so wondering how can set menu right under button?

<div id="nav" class="grid_5"> <a href=""> </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=""> water ice creams </a><br> <a class="menubutton" href=""> hard candies </a> </div>

the menu set under button using absolute position.

here how site looks while total screen:

here how site looks while windowed:

i larn how jquery/jscript or css.

you're having problem because menu beingness position relative body window width changes position of menu moves. solve problem want place link , menu in element position: relative on it.

this mean can absolute position menu relative container in. like

<div style="position: relative"> <div id="nav" class="grid_5"> <a href=""> </a> <a id="products" href=""> products </a> <a href=""> home </a> </div> <!-- when position absolutely relative 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=""> water ice creams </a><br> <a class="menubutton" href=""> hard candies </a> </div>

obviously it's improve not utilize inline styles , instead apply class container

javascript jquery css