Creating drop downs (that don’t alter the space below them when opened )

Just a very quick tutorial on how to create a dropdown (like a drop down menu), so that when you expand the dropdown the space below it isn’t pushed down.

Like this (all the Other actions below contain a drop down menu – see next image)

When I expand one of the menus I don’t want the row below pushed down. I want the dropdown to overlay and not alter the space below it (ie not push the row below down). Like below:

The way this is done is but having the menu that it opens in a wrapper (with position set to relative ). Then setting the display of the menu ( position: absolute , which is absolute to its parent the wrapper  , and placing it as required ).

e.g. heres a simple example

Here is some text that sites behind the menu its not pushed down!

You just need to write the js (or css) to show / hide the red menu when the button is clicked. And you have a nice drop down.

Here the code:

<div style="position: relative;">

   <button>make a menu dropdown</button>
   <div style="position: absolute; border: 1px solid green; background-color: red;">
   menu item 1<br>
   menu item 2<br>
   menu item 3<br>
   </div>
</div>