Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>dgr ¦ template</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<SCRIPT type="text/javascript">sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (document.all) { //MS IE
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
}
</SCRIPT><STYLE>#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 234px;
}
#nav li { /* all list items */
/*position : relative;*/
float : left;
line-height : 2.7em;
width : 234px;
/*height: 34px;
_height: 32px;*/
background-color: #c8d5e8;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -499em;
margin-left : 234px;
margin-top: -2em; /*-26px;*/
border : 1px solid #ffffff;
z-index: 1000;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
/*width : 234px;
w\idth : 234px;*/
display: block;
color : #990000;
font-weight : bold;
text-decoration : none;
border-bottom : 1px solid #ffffff;
background-image: url(nav_bkgrd.jpg);
background-position: left;
background-repeat: repeat-y;
/*height: 32px;*/
padding: 0px 0 0 25px;
}
#nav li a:hover {
color : #990000;
background-image: url(nav_bkgrd_hover.jpg);
background-position: left;
background-repeat: no-repeat;
background-color: #d9e1ee;
/*height: 32px;*/
text-decoration : none;
/*display : block;*/
z-index:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
/* Fix IE. Hide from IE Mac \*/
#left ul li { float: left; height: 1%; }
#left ul li a { height: 1%; }
/* End */</STYLE>
</head>
<body>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">search</a></li>
<li><a href="#">gaming</a>
<ul>
<li><a href="#">remoras</a>
<ul>
<li><a href="#">echeneis</a></li>
<li><a href="#">phtheirichthys</a></li>
<li><a href="#">remora</a></li>
<li><a href="#">remorina</a></li>
<li><a href="#">rhombochirus</a></li>
</ul></li>
<li><a href="#">tilefishes</a>
<ul>
<li><a href="#">caulolatilus</a></li>
<li><a href="#">lopholatilus</a></li>
<li><a href="#">malacanthus</a></li>
</ul></li>
<li><a href="#">bluefishes</a>
<ul>
<li><a href="#">pomatomus</a></li>
<li><a href="#">scombrops</a></li>
<li><a href="#">sphyraenops</a></li>
</ul></li>
</ul></li>
<li><a href="#">racing</a></li>
<li><a href="#">liquor</a>
<ul>
<li><a href="#">remoras</a>
<ul>
<li><a href="#">echeneis</a></li>
<li><a href="#">phtheirichthys</a>
<ul>
<li><a href="#">slender suckerfish</a></li>
</ul></li>
<li><a href="#">remora</a></li>
<li><a href="#">remorina</a>
<ul>
<li><a href="#">white suckerfish</a></li>
</ul></li>
<li><a href="#">rhombochirus</a>
<ul>
<li><a href="#">r. osteochir</a></li>
</ul></li>
</ul></li>
<li><a href="#">tilefishes</a>
<ul>
<li><a href="#">caulolatilus</a></li>
<li><a href="#">lopholatilus</a></li>
<li><a href="#">malacanthus</a></li>
</ul></li>
<li><a href="#">bluefishes</a>
<ul>
<li><a href="#">pomatomus</a></li>
<li><a href="#">scombrops</a></li>
<li><a href="#">sphyraenops</a></li>
</ul></li>
</ul></li>
<li><a href="#">charitable fundraising</a></li>
<li><a href="#">promotions & competitions</a>
<ul>
<li><a href="#">climbing perches</a>
<ul>
<li><a href="#">anabas</a></li>
<li><a href="#">ctenopoma</a></li>
</ul></li>
<li><a href="#">labyrinthfishes</a>
<ul>
<li><a href="#">belontia</a></li>
<li><a href="#">betta</a></li>
<li><a href="#">colisa</a></li>
<li><a href="#">macropodus</a></li>
<li><a href="#">malpulutta</a></li>
<li><a href="#">parosphromenus</a></li>
<li><a href="#">pseudosphromenus</a></li>
<li><a href="#">sphaerichthys</a></li>
<li><a href="#">trichogaster</a></li>
<li><a href="#">trichopsis</a></li>
</ul></li>
<li><a href="#">kissing gouramis</a></li>
<li><a href="#">pike-heads</a></li>
<li><a href="#">giant gouramis</a></li>
</ul></li>
<li><a href="#">registered clubs</a></li>
<li><a href="#">responsible service of alcohol</a></li>
<li><a href="#">application forms</a></li>
<li><a href="#">signs & products</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact information</a></li>
</ul>
</body>
</html>
Is there a specific reason for supporting that browser?
#nav li a:hover {
color : #990000;
background-image: url(nav_bkgrd_hover.jpg);
background-position: left;
background-repeat: no-repeat;
background-color: #d9e1ee;
/*height: 32px;*/
text-decoration : none;
/*display : block;*/
z-index:0;
}
Added: I found this by deleting progressively smaller halves of the css until I isolated the offending line.
Added: And it was a waste since the solution was already posted in the cross-posted CSS forum version of this thread [webmasterworld.com]. :/
