Hello everyone, I am having some issues with my drop down menus. I understand what is going wrong with them, the next <li> is further down on the html markup so it gets put in front of the drop down menu which is coded previously. NOTE: I can get it to work in firefox, but IE I have had no improvement. Now the question is how do I fix it? http://cameronperry.com/dropdown/ I have tried using z-index in every way possible and it hasn't fixed anything (in IE). On the dropdown if the <li> is z-index without the <ul> then the <ul>'s border is still hidden, so that is something to take into consideration. Anyone have any experience in fixing issues like this? Do I have to take another approach to the menu? Any help would be appreciated. Thanks!
Here is an attempt with z-index that doesn't seem to work in IE6. Is there anything I can do to get this to work in IE6? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> startList = function() { if (document.all && document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className="show"; } node.onmouseout=function() { this.className="hide"; } } } } } window.onload=startList; </script> <style> ul { width: 258px; list-style: none; margin: 0; padding: 0; font: bold 12px arial; color: white; border: 1px solid white; border-bottom: none; position: relative; } ul li { width: 228px; /* 258 */ height: 20px; /* 26 */ padding: 6px 0px 0px 30px; background: url('main_up.jpg'); border-top: 1px solid white; border-bottom: 1px solid white; margin-top: -1px; position: relative; z-index: 1; } ul li:hover { background: url('main_over.jpg'); z-index: 100; } ul li a { color: white; text-decoration: none; } ul li ul, ul li.hide ul{ width: 167px; position: absolute; top: -1px; left: 90px; display: none; visibility: hidden; } ul li:hover ul, ul li.show ul{ display: block; visibility: visible; } ul li ul li { position: relative; width: 137px; /* 167 */ background: url('sub_up.jpg'); } ul li ul li:hover { background: url('sub_over.jpg'); } </style> </head> <body bgcolor="gray"> <ul id="nav"> <li><a href="#">Group 1</a> <ul><li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li></ul> </li> <li><a href="#">Group 2</a> <ul><li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li></ul> </li> <li><a href="#">Group 3</a> <ul><li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li></ul> </li> </ul> </body> </html> Code (markup):