Best practice for hover menu?

Hi John,

I'm experimenting with the hover CSS menu.

I have created a menu which styles ok, but when viewing in IE6 the hover drop downs do not display. (it works in all other browsers) - I then checked the suckerfish example and this worked ok in IE6. - I set this up without a template and used type="hover"

So, the only difference I could see was that the suckerfish used a template, so I applied this template to my skin and now the first submenu item under the home menu does not display, but the other menu items in the home menu do. (IE6 still doesn't work though)

Is there a best practice method for reliably setting this up?

Thanks,

Lee

Hi Lee,
There is a horizontal hover sample skin in the package that works correctly in IE6.

You can check it out here:
http://demo.snapsis.com/Hover/HorizontalHover/tabid/54/Default.aspx

I would start with the CSS from that skin, it uses the son of suckerfish style of menu for CSS.

You can use the template if you want to get more control over the rest of the html output, but you may not need it.

These are the CSS classes that make the hover work.  Notice that the IE hovers are implemented by appending another class using

/* no need to change these hover classes
unless you need more than 4 levels */
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{
  left: -999em;
}

#nav li:hover ul,
#nav li.iehover ul {
 top: 1.6em;
 left:0;
}
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul, 
#nav li li li.iehover ul {
 top: 0;
 left:12.8em;

}

Also new is the ability to turn off the onmouseover events by setting AddMouseOver="false" in the menu properties, but this defaults to true and only adds them for IE.  If you look in the page source it will look like this when they are there:

onmouseover="this.className+=' iehover ';"  onmouseout="this.className=this.className.replace(' iehover ', '');

Hi John,

Thanks for the info, I've just worked it out. - I had taken some of the code from suckerfish which was using sfhover for their IE class and your is using iehover - DOH! - That little piece of code took quite a while to find! - It now works in all browsers!

Cheers,

Lee

Your naming of the code makes more sense than the original. - If anyone else is having display problems in IE6 this could be the culprit. - Cheers,