suckerfish dropdown

does not display in IE6/7

[KatrinR]

hello all - I was searching on this forum and worked through different versions of the suckerfish dropdown menu, yet with all of them I run into a different issue that made it not working. Therefore, I decided on the version of Son of Suckerfish dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns/)and hope to get some help here to what is missing for IE6/7

Here are my styles

#tnav {
width:685px;
margin-left:210px;
list-style: none;
float:right;
position:relative;
}

#tnav, #tnav ul {
padding: 0;
margin: 0;
list-style: none;
}

#tnav a {
display: block;

}

#tnav li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#tnav li a:link, #tnav li a:hover, #tnav li a:active, #tnav li a:visited {
display: block;
padding: 3px;
text-decoration: none;

}
#tnav li ul {
position: absolute;
width: 95px;
left: -999em;
}

#tnav li:hover ul, #tnav li.sfhover ul {
left: auto;

}

I tried to insert following for IE

<!--[if ie]>
/* for ie/Win Only */
<style type="text/css" media="screen">
#tnav li ul {
top: 10px;
left: 0;
}
</style>
<![endif]-->

yet it didn't work (only misaligns some of my design!)

Any help is so appreciated

Thank you,
Katrin

[mattur]

Hi Katrin,

Have you got the relevant javascript included in your page?

IE only supports :hover on links, it doesn't support :hover on li's. So to work in IE, Son of Suckerfish needs a bit of javascript to display. HTH.

[KatrinR]

yes, I included (from the 'Son of suckerfish')

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 (window.attachEvent) window.attachEvent("onload", sfHover);

Katrin

[mattur]

Hi Katrin,

You need to change the js to use your div's id, i.e. change "nav" to "tnav":

var sfEls = document.getElementById("tnav").getElementsByTagName("LI"); 
...etc

[KatrinR]

:-) yes, this makes sense... and it works now. No tutorial said that, and I don't know JavaScript - yet.

(That's why I don't like copying things without understanding them.)

THANK YOU SO MUCH!

Katrin :-)