alistapart hybrid css/sliding doors problem [Archive]

ziggy3984

01-13-2010, 05:47 PM

I have been trying to trouble shoot this nav bar. I can't seem to get it right. The issues reside mainly in ie. But there may be issues elsewhere.
Basically, I cannot get the submenu to appear when the main menu tabs are rolled over.

Any help would be greatly appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<script type="text/javascript">
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+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

<style type="text/css">

#mainnav{
width:927px;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
height:46px;
}
#nav {
width:827px;
margin-left:100px;
padding:0;
text-align:center;
font-size:14px;
}

#nav a {
text-decoration: none;
}
#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
margin-left:5px;
}

#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
position: absolute;
top: 29px;
*top: 29px; /*reposition for IE*/
height: 23px;
left: 0;
margin: 0;
padding: 0;
background:#00759F;
width:867px;
*width:927px;
padding-left:60px;
}
#nav li.off{
background: url("/header/up_r.jpg") no-repeat right top;
}
#nav li.off:hover, #nav li.over, {
background: url("/header/over_r.jpg") no-repeat right top;
}
#nav li.on{
background: url("/header/over_r.jpg") no-repeat right top;
}
#nav li.off a{
background: url("/header/up_l.jpg") no-repeat left top;
}
#nav li.off a:hover, #nav li:hover a, #nav li.over a {
background: url("/header/over_l.jpg") no-repeat left top;
}
#nav li.on a{
background: url("/header/over_l.jpg") no-repeat left top;
}
#nav li.on ul li a{
background:#00759f;
}
#nav li.on ul li a:hover{
background:#000000;
}
#nav li.off ul li a{
background:#00759f;
}
#nav li.off ul li a:hover{
background:#000000;
}
#nav li a {
/*for all links in the list*/
color: #ffffff;
font-weight: bold;
display: block;
height: 12px;
padding: 8px 15px 9px 15px;
*display:inline;
}

#nav li.on a {
color:#ffffff;
}

#nav li.on ul a, #nav li.off ul a {
/* cancel inherit of border
on subnav of active topic */
border: 0;
float: left;
color: #ffffff;
width: auto;
margin-right: 10px;
padding:5px 30px 5px 30px;
font-size:12px;
}

#nav li.on ul {
/*display active subnav list*/
display: block;
}

#nav li.off:hover ul, #nav li.over ul {
/* display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li:hover a, #nav li.over a{
color: #ffffff;
}
</style>

-----------------------

<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="mainnav">
<ul id="nav">
<li class="on"><a href="#">Products</a>
<ul>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
</ul>
</li>
<li class="off"><a href="#"> Support</a>
<ul>
<li><a href="#">SupportPage1</a></li>
<li><a href="#">SupportPage2</a></li>
<li><a href="#">SupportPage3</a></li>
</ul>
</li>
<li class="off"><a href="#">AnotherTab</a>
<ul>
<li><a href="#">Anothersub1</a></li>
<li><a href="#">Anothersub2</a></li>
</ul>
</li>
<li class="off"><a href="#">morestufftab</a>
<ul>
<li><a href="#">morestuff1</a></li>
<li><a href="#">morestuff2</a></li>
<li><a href="#">morestuff3</a></li>
</ul>
</li>
<li class="off"><a href="#">About UsTab</a>
<ul>
<li><a href="#">aboutuspage1</a></li>
<li><a href="#">aboutuspage2</a></li>
<li><a href="#">aboutuspage3</a></li>
<li><a href="#">aboutuspage4</a></li>
<li><a href="#">aboutuspage5</a></li>
</ul>
</li>

</ul>
</div>
</td>
</tr>
</table>