Dropdown/Nested menu list not showing in IE 6

[njoay]

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;
}

[fasterthanlight™]

If you follow this article, you can rebuild your menu from scratch and it is bomb proof no matter what version of IE you are viewing in

http://www.alistapart.com/articles/dropdowns/

[njoay]

Fasterthanlight,

I've tried rebuilding with that article but for some reason the dropdowns still don't view when I implement it into my design. It seems as if the dropdown gets cut off or is forced not to display. If I totally restructure my site, it might work but I'm also on a deadline. I'll try rebuilding it again, but I think there might be something wrong with the way I've layed out the site.

Thanks

[fasterthanlight™]

Are you sure you've included the IE javascript fix at the end of the article?



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;
make sure the bolded "nav" is switched to whatever ID you gave your menu

ps. your menu <ul> has no ID to make that javascript work when you add it,

[njoay]

Fasterthanlight,

Yes I have added the JavaScript and it still doesn't work. I've validated for both HTML and CSS and everything validates so I'm not sure what I'm not doing or doing wrong. Can you clarify your last sentence in your reply about my menu <ul> has no ID, what ID should I give it? Because, instead I've given the li a class: <li class="current-page-item">.

Thanks for your responses, I really appreciate them.

[fasterthanlight™]

can you show me where you've added the javascript function?

i can't see it in either your swfObject or Ac_runactivecontent javascript files.


Basically, what the javascript does is, looks for an element with the id of "nav" and it forces IE to do the drop down functionality,

so your <ul> needs an id like so:

<ul id="nav">

so that the javascript knows which elements you want to drop down


navRoot = document.getElementById("nav");

[njoay]

Fasterthanlight,

Please check the link again and you'll find the inline JavaScript. I had it calling the JS file, but now have cut and pasted it inline and finally some progress?! At least now I see the submenu links trying to show, but it's still hidden.

http://www.sanjac.edu/sportstest/baseball/

Thank you so much!

[joecool1972]

Hi all,

I know this is and old thread and I am really sorry to
resurrect it, but I was just wondering if there was a quicker or better fix these days. I have checked out the following articles:

http://www.alistapart.com/articles/dropdowns/

http://htmldog.com/articles/suckerfish/dropdowns/

And have it almost working with IE 6 etc but I just wanted to check if there was a more recent more streamlined fixed.

Cheers


Joecool

[joecool1972]

I also use IE6 but it works well in my browser.

Hi sophielucky,

Thanks for the reply. I am new to CSS and anything other than basic HTML, but I am getting there. I have got it to a stage where the drop downs come down but it stays there.

I will go through the instructions again, but if anyone knows a quick fix I would be grateful.

Cheers

Joecool1972