Here's the problem, is that I have a dropdown nav which i have used before and am currently implementing into this website http://www.magnam.com/patrol/internal.htm
The dropdowns are absolute div's, and mostly everything else is relative.
The CSS for the dropdown is found here and is as follows: http://www.magnam.com/patrol/c/roll_i.css
ul.sub {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 16px 9px 9px 9px;
position: absolute;
color:#fff;
top: 50px;
text-align:left;
}
ul.one {
left: -999em;
z-index:999999;
}
ul.two {
left: -999em;
z-index:999999;
}
li:hover ul.one, li.sfhover ul.one {
left: 119px;
background: #5A0000 url(../i/nav_curve.gif) bottom no-repeat;
width: 70px;
height: 39px;
text-decoration: underline;
z-index:9999999999;
drdoc: ";
/*";/* IE */
}
li:hover ul.two, li.sfhover ul.two {
left: 209px;
background: #5A0000 url(../i/nav_curve2.gif) bottom no-repeat;;
width: 79px;
height: 39px;
drdoc: ";
/*";/* IE */
}
/* Application: Common Code */
.rollover { display: block; } /* Allow setting widths and heights */
/*.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
/*.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
The rest of the CSS is in this file http://www.magnam.com/patrol/c/roll_i.css.
This is so far only working in IE6 since that is the audience the client is targeting at the moment, but I will fix it for other browsers once i figure out the problem. Basically all header have a background image, so if i remove the image then the dropdown works fine but when i add it, the image overlaps the dropdown. I've tried setting z-index but that does not seem to work.
If anyone can help me figure out the problem, that would be greatly appreciated.
Again, this will only work in IE6 for the time being. If you need to know more information please contact me.
Thanks,
Marwan
