How to prevent child element to move when parent dropdown?

Question

I have a div with height:20px with hover. When you put the cursor on it, a menu bar appears, this menu bar have height:50px.

After that i have a second div which is juste a yellow pannel with margin-top: 50px (so it's 50px from the parent who is the first div (that has : height : 20px)).

Now when the hover effect happend, the second div (the yellow pannel) moves down with the droping down effect.

How to make the second div do not have a margin top with the direct first div (his parent) ?

Thank you

Answer 1

In css you need to give your menu bar div an absolute position.

For Example: .menubar { position: absolute; } so that it overlays everything, so it won't affect anything else.

Then adjusted if needed

Example: .menubar { position: absolute; top: 0px; left: 20px; }

Also you will need to increase the yellow div from 50px to 70px

.yellow { margin-top: 70px; }