CSS: Header covering navigation menu, breaking hover effects

I'm c开发者_如何学Currently working on this website and have just noticed a problem with the div#top its covering the menu so you can only hover a link when just under the text. Does anyone have any idea how to fix this? http://gridironstuds.com/

specify the height to the div#top{height:100px;} and reduce the size of logo image.

I used chrome inspector and simply changed this

div#top {position:absolute;}

to

div#top {position:static;}

and it fixed right up. Question though, why is your title in the body? It should be in the head of your html.

You've nailed the problem: the div#top is covering the menus. To fix this, shorten the element: change its height attribute to something smaller (looks like 88px is about perfect).

Try your page with <div id="top" class="centerContainer" style="height:88px;">.
If that looks good, add that to your div#top rule in your master.css.

You could try using a z-index to bring the menu above the header image. Then maybe the menu's background could be transparent so that it is still visible afterwards.