Pure css dropdown menu covers links above

HTML & CSS
1

I’m really getting into CSS, and since I have very little experience, I guess you’ll notice too :smiley:

Here’s another question:

I added this pure CSS dropdown menu to my site, and after some tweaking I got it to work with background images:

http://www.galleons.it/sptest/

It actually works perfectly in all browsers. The only problem I have is with FF, where the menu works great, but the clickable logo above the menu is ‘covered’ by the <li> and/or <a>'s of the menu and partially not clickable anymore. You can see the ‘covering’ with firebug.

I tried adding some z-index, but that made no difference.

Any solutions?

2

HI,

Just set the z-index like this:


.header h1,.statement,.primary-nav{
    position:relative;
    z-index:2;
}
.primary-nav{z-index:1;}
3

Thanks Paul. So I needed the

position:relative;

to make it work?

4

Yes only positioned elements can have a z-index applied. If the element is static then you can add position:relative without changing its appearance and then you can apply a z-index.

In IE7 and under it’s ultimately the positioned parent that needs to be controlled as that controls the stacking context for all it’s children.

5

I did a ton of searching for CSS drop-down menus recently (horizontal menus). The problem was that all of the tutorials I found were not centered. They were left justified. Here is an excellent tutorial that shows you how to make a centered horizontal drop-down menu using only CSS (no javascript except for IE6. If you don’t support IE6 like I do not, you don’t need the JS).

I am not using submenus in my menus. I don’t suppose it would be too difficult to do that. Maybe someone with more knowledge than I possess could answer.

You can tweak the CSS to style the menus any way you like. That tutorial linked to above is simply the best in my opinion.