Suckerfish / jQuery menu won't stay open in IE6

programming web dev
1

I’ve been working on using jQuery to get the pseudo :hover state mimicked for a horizontal Son of Suckerfish menu working in IE6. I’m almost there, except I can’t seem to keep the 1st level sub-menu active past the menu item closest to the top level menu.

Here’s my code and CSS, using Jquery 1.3.x, I believe:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Son of Suckerfish</title>
<style type="text/css">
/* BEGIN MAIN NAVIGATION STYLES */
    .cxSiteNav, .cxSiteNav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.cxSiteNav a {
    display: block;/* don't need top level width on <a> tag because you have variable width menus
        /* width: auto; */
}
.cxSiteNav li {
    float: left;/* don't need top level width on <li> tag *//* width: 10em; */
    }
.cxSiteNav li ul {
    position: absolute;
    width: 12em;
    left: -999em;
    z-index: 1000000;
}
.cxSiteNav li ul li {
    width: 12em;
}
.cxSiteNav li:hover ul, .cxSiteNav li.sfhover ul {
    left: auto;
    margin-left: -1px;
}
/* BEGIN custom navigation styles */
    
    .cxSiteNav {
    font-size: 1em;
    font-weight: bold;
}
.cxSiteNav a {
    text-decoration: none !important;
    padding: 3px 4px 4px 4px;
}
/* primary nav top level styles */
    
    .cxSiteNav li.cxPrimaryNav {
    border-color: #90C5E7 #004878 #004878 #90C5E7;
    border-style: solid;
    border-width: 1px;
}
.cxSiteNav li.cxPrimaryNav a {
    color: #fff;
    background-color: #0079c8;
}
.cxSiteNav li.cxPrimaryNav a:hover, .cxSiteNav li.cxPrimaryNav a:active {
    color: #08588c;
    background-color: #cee3f2;
}
/* primary nav second level styles */
    .cxSiteNav li.cxPrimaryNav ul {
    border: 1px solid #6097BF;
    font-weight: normal;
}
.cxSiteNav li.cxPrimaryNav ul li a {
    background-color: #E6F1F8;
    border: 1px outset #fff;
    color: #08588C;
}
.cxSiteNav li.cxPrimaryNav ul li a:hover, .cxSiteNav li.cxPrimaryNav ul li a:active {
    color: #fff;
    background-color: #0079c8;
}
/* secondary nav styles */
    
    .cxSiteNav li.cxSecondaryNav {
    border-color: #C0ED90 #428000 #428000 #C0ED90;
    border-style: solid;
    border-width: 1px;
}
.cxSiteNav li.cxSecondaryNav a {
    color: #fff;
    background-color: #6ed700;
}
.cxSiteNav li.cxSecondaryNav a:hover, .cxSiteNav li.cxSecondaryNav a:active {
    color: #428000;
    background-color: #C0ED90;
}
/* tertiary nav styles */
    
    .cxSiteNav li.cxYellowPages {
    border-color: #ffffa8 #949400 #949400 #ffffa8;
    border-style: solid;
    border-width: 1px;
}
.cxSiteNav li.cxYellowPages a {
    color: #000;
    background-color: #ffff00;
}
.cxSiteNav li.cxYellowPages a:hover, .cxSiteNav li.cxYellowPages a:active {
    background-color: #ffffa8;
}
    /* END MAIN NAVIGATION STYLES */
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".cxSiteNav li.cxPrimaryNav").hover(
        function() {
            $(this).addClass("sfhover");
        },
        function() {
            $(this).removeClass("sfhover");
        }
    );
});
</script>
</head>
<body>
<ul class="cxSiteNav">
  <li class="cxPrimaryNav"><a href="#">Menu Level 1</a>
    <ul>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
    </ul>
  </li>
  <li class="cxPrimaryNav"><a href="#">Menu Level 1</a>
    <ul>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
    </ul>
  </li>
  <li class="cxPrimaryNav"><a href="#">Menu Level 1</a></li>
  <li class="cxPrimaryNav"><a href="#">Menu Level 1</a></li>
  <li class="cxPrimaryNav"><a href="#">Menu Level 1</a>
    <ul>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
      <li><a href="#">Menu Level 2</a></li>
    </ul>
  </li>
  <li class="cxSecondaryNav"><a href="#">Menu Level 2 (A)</a></li>
  <li class="cxSecondaryNav"><a href="#">Menu Level 2 (A)</a></li>
  <li class="cxSecondaryNav"><a href="#">Menu Level 2 (A)</a></li>
  <li class="cxYellowPages"><a href="#">Menu Level 2 (B)</a></li>
</ul>
</body>
</html>

There are some related styles that I have removed for business purposes here, as they do not affect the problem I’m having with the dropdowns in the blue menu in IE6. If I strip the DOCTYPE, HEAD and BODY tags, the menu functions properly.

Any assistance is greatly appreciated.

IronChefMorimoto