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

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

  • This is exactly what i just made before you answer me thank you verry much it's the correct answer
    – Mitch
    Oct 2, 2015 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.