Drop Down Menu showing below another <div> Options

[ccs]

I think I messed something up in my style.css. The website that I produced shows a drop down menu that is showing below my main body tag. I believe it is css related because it's consistent across my entire site I'm building. It passes the css validator, but clearly I did something wrong. Any ideas would be appreciated. Thanks!





 style.css ( 6.98k ) Number of downloads: 415

[pandy]

Please post the URL to the page.

[ccs]

Please post the URL to the page.

I haven't made the site live yet. Do I need to?

[pandy]

Ok, then post the HTML also. We need to see that too.

[ccs]

Ok, then post the HTML also. We need to see that too.

HTML added.

 index.html ( 3.52k ) Number of downloads: 432

[pandy]

It's the positioning. Positioned boxes are automatically on top of non positioned and when all involved boxes are positioned the one that comes last in the source is on top - that's the one with the content in this case. You can change that with z-index. It's probably enough to give #sidebar any positive z-index, for instance...

CODE

#sidebar    { z-index: 100 }

http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

[ccs]

It's the positioning. Positioned boxes are automatically on top of non positioned and when all involved boxes are positioned the one that comes last in the source is on top - that's the one with the content in this case. You can change that with z-index. It's probably enough to give #sidebar any positive z-index, for instance...

CODE

#sidebar    { z-index: 100 }

http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

Perfect! That fixed it! Thanks so much! I was pulling my hair out on that one.

[pandy]

You are welcome.