Dropdown/Nested menu list not showing in IE 6

programming web dev
1

Hello,

I cannot seem to figure out a hack or a fix for my nested list to be viewed properly in IE 6. It works fine in recent and previous versions of Firefox and Safari, but in IE 6 the nested list does not even appear.

In IE7, the menu is hidden behind and although I’ve put the z-index to 999, I still have the problem. But in IE6, the menu - it’s a vertical, drop-down-like type of menu/list, that’s a little more complicated. ANY help would be greatly appreciated. I’ve tried EVERYTHING - from JavaScript, to A List Apart (Suckerfish Dropdowns), nothing works. For some reason the submenu doesn’t appear. Please help!

Here’s the link to the site (and snippets of the code is below). If you view it in Firefox you’ll see the vertical menu, in IE6 you won’t.

http://www.sanjac.edu/sportstest/baseball/ (Wouldn’t mind feedback on design and layout too.)

Thank you!

<div id="nav-container">
  <div id="nav2">
    <ul>

      <li class="page-item"> <a href="#" title="Info"> <span class="menu-mid"> <span class="menu-caption">Info</span> </span> </a>
        <ul>
          <li class="page-item"> <a href="#" title="Info 1"> <span class="menu-mid"> <span class="menu-caption">Info1</span> </span> </a> </li>
          <li class="page-item"> <a href="#" title="Info 2"> <span class="menu-mid"> <span class="menu-caption">Info 2</span> </span> </a> </li>
          <li class="page-item"> <a href="#" title="Info 3"> <span class="menu-mid"> <span class="menu-caption">Info 3</span> </span> </a> </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Here’s the CSS:

#nav-container {
    position: absolute;
    top: 53px;
    left: 454px;
    color: #E0E0E0;
    background: #242831;
    width: 327px;
    font-family: "lucida fax", helvetica, arial, sans-serif;    
    word-spacing: normal;
    letter-spacing: 0;
        line-height: 1.4em;
    font-size: 1em;
    z-index: 400;
}

#nav {    
    height: 27px;
    background: transparent url(../images/nav-bg.png) no-repeat;
    padding-bottom: 0;
}

#nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;    
}

#nav ul li {
    float: left;
    margin: 0 1px;
    color: #000;
}

#nav ul li a {
    display: block;
    float: left;
    color: #000;
    text-decoration: none;
    padding: 0 0 0 20px;
    height: 33px;
}

#nav ul li a span {
    padding: 12px 15px 0 0;
    height: 17px;
    float: left;    
}

#nav ul li a:hover {
    color: #EAF3F8;
}

#nav ul li a:hover span {
    display: block;
    width: auto;
    cursor: pointer;
}

#nav ul li a.current, #nav ul li a.current:hover {
    height: 28px;
}

#nav ul li a.current {
    display: block;
    width: auto;    
}


#nav2 {
    height: 27px;
    background: transparent url(../images/nav-bg.png) no-repeat;
    padding-bottom: 0;
    z-index: 500;
}

#nav2 ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
}    

/*first level*/
#nav2 ul>li {
    float: left;
    margin-left: 5px;
    list-style-type: none;
}

#nav2 ul li {
    float: left;
    list-style-type: none;    
}

#nav2 ul li.current-page-item {
    background: url(../images/nav-over1.jpg) no-repeat top left;
    height: 30px;
    width: 67px;
    text-decoration: none;
    display: block;    
}

#nav2 ul li.current-page-item a {
    color: #fff;
}


#nav2 ul li:hover ul li .menu-mid {        /* bg for drop down menu */
    display: block;
    float: left;
    background: transparent url(../images/menu_1pixel.png);
    height: auto;
    width: 100%;
}

#nav2 ul li:hover ul li:hover .menu-mid, #nav2 ul li.over ul li.over .menu-mid {    /* hover for the drop down menu */
    display: block;
    float: left;
    background: transparent url(../images/menu_1pixel_dark.jpg);
    height: auto;
    width: 100%;
}

#nav2 ul li ul .current-page-item .menu-mid {
    background: transparent url(../images/menu_1pixel_dark.png);
}

#nav2 ul li ul li .menu-caption {
    float: left;
    padding: 5px 14px;
}


#nav2 ul li:hover ul .current-page-item ul .menu-mid {
    background: transparent url(../images/menu_1pixel_dark.png);
}
#nav2 ul li:hover .current-page-item .menu-mid {
    background: transparent url(../images/menu_1pixel_dark.png);
}
#nav2 ul li ul .menu-caption {    
    margin-top: 8px;
}

Here is a separate CSS that I’ve created for IE6:

* html #nav2 ul li.page-item a:hover {
    float: left;
    background: url(../images/tab-mid1.jpg) repeat-x;
    height: 30px;
    color: #fff;    
}

* html #nav2 ul li .menu-mid {
    float: left;
    height: 30px;    
    color: #000;
    margin: 10px 10px 0px 5px;
}

* html #nav2 ul li a:hover .menu-mid  {
    color: #fff;
}

* html #nav2 ul li a:hover .menu-left {
    float: left;
    height: 30px;
    width: 8px;    
    background: url(../images/tab-left.jpg) repeat-x top left;
}

* html #nav2 ul li a:hover .menu-right {
    float: left;
    height: 30px;
    width: 8px;    
    background: url(../images/tab-right.jpg) repeat-x bottom left;         
}

/*second level*/


* html #nav2 li:hover ul, #nav2 li.over ul {        /* bg for drop down menu */
    background: transparent url(../images/menu_1pixel.png);
    display: block;
}


* html #nav2:hover ul, #nav2 li.over ul {
    dislay: none;
}

* html #nav2 ul li:hover ul, #nav2 ul li.over ul {
    display: block;
}