Dropdown menu using css

Question

I have ceated a dropdown menu using the following css

.menu li ul {display: none;}
.menu li:hover > ul {display: block;}

But the problem is whenever the menu dropsdown the content below shifts down. How can I prevent that.

Akhil K Nambiar · Accepted Answer · 2011-06-09 04:43:37Z

2

You can prevent that by positioning the sub menu absolute.

.menu li ul {display: none; position: absolute; }

You also have to set

.menu { position: relative; }

as said in the comment by Tae. If you do not, the sub menu will probably set to the top left corner of the page.

Akhil K Nambiar

3,97514 gold badges51 silver badges88 bronze badges

answered Jun 8, 2011 at 16:40

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don't forget to make the menu position:relative;, or the submenu will be positioned relative to the browser window.