473,554 Members | 2,093 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

z-index problem for css dropdown menu

3 New Member
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 4490
drhowarddrfine
7,435 Recognized Expert Expert
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
TheFoot
3 New Member
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 Recognized Expert Expert
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
TheFoot
3 New Member
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

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

Similar topics

1
2309
by: LG | last post by:
I have asked before but I did not get all the answer I wanted. Perhaps I explained too bad. I have my site in frames, and the dropdown list is in the 'left' frame, and I have used javascript so that when you click on the selected word in the dropdown menu, it automatically opens up an URL. I want it to open up in the right frame. As it now...
4
4949
by: Tim | last post by:
Hi, I've been searching the web for hours now and found lots and lots of javascript files with which you can create dropdown menu's, but with all of them you have to specify the width of the menu-items. This is not exactly to my liking because you have to set the width according to the text in the menu-items. Now, when working width a...
3
2119
by: ACaunter | last post by:
Hi there, can someone please tell me what the easiest way to have a dropdown menu bar positioned on the screen (eg. Home, company, ... , contact us) then when the mouse goes over then, the sub menu options are displayed thanks a lot -- AdamPC@hotmail.com
4
2310
torquehero
by: torquehero | last post by:
Hi all :) I have created a horizontal navbar using Xara Menumaker. The Menu items have several dropdown menus. Its a javascript. When the mouse cursor is moved over any menu item, a dropdown list/menu appears. When the page is opened in the browser (as it appears by default), the dropdown menu positions are correctly displayed. But when I...
0
1627
by: plunder | last post by:
Hi all what I'm trying to do is a flash menu which in some points has a dropdown sub-menu which comes out on mouseover and contains elements which if clicked link to other pages. Point is that these elements contained in this sub menu when clicked actually do nothing...! Here is what I did: placed the menu the way I wanted, converted...
0
1504
by: temp304 | last post by:
Customize Dropdown Menu is designed to display some choices, as: languages, countries, themes,... but it's differrent from original version in browsers. This tool combine CSS and JavaScript to create a dropdown you can add image to tilte, every choice. Version 2: check if JavaScript is disabled, then add normal dropdown menu Let's try...
19
3658
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the code for this from a tutorial but that menu was flush-left justified. Not what I want. Subsequent searches on google on how to center yielded a
1
1040
by: dittu | last post by:
I want to design dropdown menu.This menu contains two item(save,saveContent).When mouse over on Menu then display below like that ____________ Menu | -------------| Save | SaveContent | -------------- When click on "Save" item then the Menu will be changed to One "TextBox" and "GO Buttoon" on dropdown menu. ____________
0
1545
by: Helena Tran | last post by:
I'm doing a dropdown-menu, and combine JS. It's display well in all browser, but it has an error when displaying in IE 7,8 browser: Menu dropdown in normal : http://i107.photobucket.com/albums/m282/benhimimi/Pictures/Hinh%20tong%20hop/YNC/more_btn.jpg Menu dropdown when hover : ...
0
7605
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7530
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7808
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8047
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7570
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6156
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5162
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3556
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2022
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.