PDA

View Full Version : CSS Dropdown List Displays Behind Parent List (z-index not working)



Dev2Live
Jul 16th, 2010, 03:04 AM
Hi,

I've been tearing my hair out over this for days, searching forums, etc. I read a similar thread on this forum, but was unable to adapt the solution to my site. My CSS dropdown menus are displaying behind their own parent lists. I've tried including z-index attributes in the CSS, but have not seen any effect, regardless of how many different ways I try to include it. I've included my original CSS code (without z-index) and a derived version of the list on my site.


CSS



#dropdown a {
width: 220px;
}

#dropdown ul {
margin: 0;
padding: 0;
list-style-type:none;
width: 230px; /* Width of Menu Items */
background: #fff;
}

#dropdown ul li {
position: relative;
background: #fff;
background-image:none !important;
background-position: 0 0px !important;
padding-left: 0px !important;
padding-bottom: 0px !important;
}

#dropdown li ul {
position: absolute;
left: 230px; /* Set 1px less than menu width */
top: 0;
background: #fff;
display: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

/* Styles for Menu Items */
#dropdown ul li a {
display: block;
text-decoration: none;
color: #333;
background: #fff; /* IE6 Bug */
padding: 2px 5px;

}

#dropdown ul ul li
{
background-image:none !important;
background-position:0px 0px !important;
padding:0px 0pt 0px 0px !important;
}


#dropdown ul li a:hover { background: #e6f3ed; } /* Hover Styles */

#dropdown li ul li a { color: #08884a; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 2px 5px;} /* Sub Menu Styles */

#dropdown li ul li a:hover { text-decoration:underline; }

#dropdown li:hover ul, li.over ul { display: block; }


HTML


<DIV id=dropdown>
<TABLE>
<TBODY>
<TR>
<TD width=100>
<UL>
<LI><A>Item 1 </A>
<UL>
<LI><A>Item 1.1 </A>
<LI><A>Item 1.2 </A>
<LI><A>Item 1.3 </A></LI></UL></LI></UL></TD>
<TD width=100>
<UL>
<LI><A>Item 5 </A>
<UL>
<LI><A>Item 5.1 </A>
<LI><A>Item 5.2 </A>
<LI><A>Item 5.3 </A></LI></UL></LI></UL></TD></TR></TBODY></TABLE></DIV>


If I can get the dropdown for Item 1 to display on top of Item 5 I should be good to go. Thanks in advance!

abduraooft
Jul 16th, 2010, 09:11 AM
I'd recommend you to cleanup/validate your markup first by
1) Adding a suitable DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top, if you don't have one right now
2) Changing all tags (and attributes) to lowercase (which is a good practice)
3) Removing the table(s) in your markup (http://www.hotdesign.com/seybold/), which should only be used for presenting tabular data.
4)Wrapping all attribute values by quotes

Or in short, try to make it valid (http://validator.w3.org/docs/help.html#validation_basics) and semantic (http://boagworld.com/technology/semantic-code-what-why-how) first.

Or check the article at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see how to make a good drop-down.

Dev2Live
Jul 16th, 2010, 06:02 PM
I'd recommend you to cleanup/validate your markup first by
1) Adding a suitable DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top, if you don't have one right now
2) Changing all tags (and attributes) to lowercase (which is a good practice)
3) Removing the table(s) in your markup (http://www.hotdesign.com/seybold/), which should only be used for presenting tabular data.
4)Wrapping all attribute values by quotes

Or in short, try to make it valid (http://validator.w3.org/docs/help.html#validation_basics) and semantic (http://boagworld.com/technology/semantic-code-what-why-how) first.

Or check the article at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see how to make a good drop-down.


Thanks for your help. I'll try to address your points as you made them.

1) My current DOCTYPE is set as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">. Our site is built in .NET so it is contained in the master file.

2) & 4) Unfortunately, the web admin tool that I am forced to use auto-compiles my code, capitalizing the tags and removing the quotes. There's nothing I can do about that.

3) I included the table because I need to display two columns of information. The actual list on my site is much longer, but functions the same way. What alternative would you suggest?

I have to apologize for my spotty understanding, I'm fairly new and self-taught. Our site was built by a third party and they did a messy job. If I could, I would rebuild the site from scratch. I was just wondering if there were any glaring errors in the CSS, or any industry tricks to get these dropdowns to display correctly. I know that many people have had this same problem and have solved it with z-index, I just can't figure out how to implement it in my code.

Thanks again!