How can I align a div directly under another?

Question

I created a drop-down menu in jQuery and it works fine, but I only have one problem with menu positioning. I created the menu right after I learned about jQuery animation, and I'm still a beginner, so I did not follow the tutorials.

So, I was wondering, how can I place the menu directly below the button?

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

The menu is set under the button using the absolute position.

Here's what the site looks like in full screen:

Here's what the site looks like during windows:

I would like to know how to do this using jQuery / JScript or CSS.

Answer 1

You have this problem because the menu is in position relative to the body , since the width of the window changes the position of the menu move. To solve this problem, you want to place your link and menu in the position: relative element.

This means that you can completely position your menu relative to the container. So something like

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

Obviously, it’s better not to use inline styles and instead apply the class to the container

Answer 2

Wrap the navigator and the div menu in a div and apply the position at which your div position will work accordingly:

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