Need help with menu drop down (not coming on top of banner)

HTML & CSS
1

Hi,

I am trying to get a drop down menu to go over the banner I have for a site I am building: Home page

I am stumped as to why the drop down goes under the banner.

Is it something to do with z-index?

Any help would be greatly appreciated.

2

thanks very much :slight_smile:

3

Hi,

Set position:relative on the nav and give it a higher z-index than anything that follows.

e.g.


#nav {
  position: relative;
  z-index: 99;
}
4

You really are a saint! Thanks so much :slight_smile:

I owe you many times

I had played with the z-index but wasn’t sure why it wasnt working.

Why does the position relative line fix this problem?

5

z-index only applies to positioned elements. Therefore if the element is static then you need to add position:relative (without co-ordinates) and then you can apply a z-index as required.

This has no visual effect on the element other than providing a stacking context for positioned children and to also allow a z-index to take effect.

(Note that in IE7 and under its ultimately the positioned parent that controls the stacking level (contrary to the specs as positioned elements should be applied z-index auto by default but IE7 and under applies zero) so its no use increasing the z-index of a child of a positioned parent because it will have no effect outside its current context. It’s the parent z-index that will control the stacking level with regards to elements outside the current context. )