z-index problem for css dropdown menu

[TheFoot]

Hi.

I have created a css dropdown menu (based on an article in www.alistapart.com). It is working just fine except for one annoying issue: the popup menu (<ul> nested within a <li>) now shows behind the other top-level <li> elements.

The most annoying thing is that it didn't do this before...! I made some changes to make it standards compliant, and some general tidying up, but I cannot remember exactly what I did that caused this to break.

I have tried z-index in all manner of ways and nothing changes. This is not browser-specific... (It worked without z-index before..???)

URL:http://dev4.carib-sys.com/en/index.asp

I appreciate any help..

Thanks, TheFoot

[drhowarddrfine]

The problem is that all those elements are part of the same class so changing the z-index gets applied to all that at the same time. The drop downs are getting covered up because the elements are floated which takes them out of the normal flow and allows the other elements to rise up into those positions.

[TheFoot]

Hi. Thanks for replying.

I think I understand what you are saying. I was advised that to subclass is better than using many classes. Was that good advice?

I have given the popup <ul> element a separate classname, rather than selectors.. what else do I need to give a class to to fix this?

Thanks for your help..

The problem is that all those elements are part of the same class so changing the z-index gets applied to all that at the same time. The drop downs are getting covered up because the elements are floated which takes them out of the normal flow and allows the other elements to rise up into those positions.

[drhowarddrfine]

By sub-classes, I assume you mean assigning a class to some parent element which contains other elements with their own class. That's fine but, in this case, it looks like those drop down elements are all part of the same class and just wrapping around inside their container. I haven't really looked close enough (just back from out of town).

[TheFoot]

Hi..

By sub-classing, I mean something like this:

[HTML]<style>
ul.top-menu-list{
/* styles */
}

ul.top-menu-list li a{
/* This is what I call sub-classed - it has no class name, but applies to <a> elements that have a parent <li> element, that are children of the ul.top-menu-list class. */
}

</style>[/HTML]
The <ul> that is the parent element for the popup list (the floated element) also has its own classname, but everything else inside it (<li>'s and <a>'s are subclassed.

Here is a rough example of how it is currently structured:

[HTML]<ul class='top-menu-list'>
<li>
<a href=''>Top Level Menu Item 1</a>
<ul class='popup-list'>
<li><a href=''>Popup menu item 1</a></li>
<li><a href=''>Popup menu item 2</a></li>
</ul>
</li>
</ul> [/HTML]

Thanks...

By sub-classes, I assume you mean assigning a class to some parent element which contains other elements with their own class. That's fine but, in this case, it looks like those drop down elements are all part of the same class and just wrapping around inside their container. I haven't really looked close enough (just back from out of town).