CSS nav bar hidden behind other content

Get Started
1

After hours of trying out different code placement for z-index’s, html replacement, etc. I’ve given up and decided to just ask the experts.

I have been unable to get my nav bar drop menu items out from behind my content on my Blogger. Here is the page: ampvibe.blogspot.com Hover over the tabs and you’ll soon see my predicament.

Hopefully you can help me out! :confused:

2

Hi Jmatty. Welcome to the forums. :slight_smile:

The first problem there is the overflow: hidden here (line 315f):

.tabs-outer {
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
position: relative;
background: #000 none repeat scroll 0 0;
}

Remove that, and the drop downs won’t be cut off any more. There are still other things to fix after that, though. The dropdowns still won’t work properly because the content below them overlaps. So add a z-index as well:

.tabs-outer {
position: relative;
background: #000 none repeat scroll 0 0;
[COLOR="#FF0000"]z-index: 100;[/COLOR]
}