Menu overlapping the body

Question

I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body. I've already tried display: block; but it didn't help

Can you look trough it please ?

Here my Demo

Answer 1

Okay, try this. Give the menu div

style="display:table;"

and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.

Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.

Answer 2

Have you created a container div for the entire page? And then have a background div and a separate menu div?

<div id="page_container">
 <div id="background"> Background code
  <div id="menu">Menu code
  </div>
  <div id="body_content">Content in body code
  </div>
 </div>
</div>