471,605 Members | 1,352 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

z-index problem for css dropdown menu

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
Sep 30 '07 #1
4 4432
drhowarddrfine
7,435 Expert 4TB
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.
Sep 30 '07 #2
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.
Sep 30 '07 #3
drhowarddrfine
7,435 Expert 4TB
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).
Sep 30 '07 #4
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).
Sep 30 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by LG | last post: by
3 posts views Thread by ACaunter | last post: by
reply views Thread by temp304 | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.