On 21/07/2007, at 11:09 AM, cpsengine wrote:
I have a single-level css dropdown and wanted to add a delay, so I
setup superfish. It's working as I can see the animation when I mouse
over my menu, but the mouse delay isn't working. I think I need to add
the sfHover class somewhere into my css, but can't find exactly what I
need to change to get this working. I was using the demo CSS file as
an example but could not get it to work. Here's my CSS
#header #nav { position: absolute; list-style: none; right: 0px; top:
60px; background: #323232; }
#header #nav li { z-index:999; position: relative; padding: 0px 8px;
display: inline; text-transform: uppercase; font-size: 14px; line-
height: 30px; height: 30px; font-weight: bold; }
#header #nav li a { color: #ccc; text-decoration: none; }
#header #nav li a:hover { color: #fff; }
#header #nav li ul { position: absolute; top: -999em; background:
#323232; width: 175px; }
#header #nav li:hover ul { top: 17px; left: 0px; }
#header #nav li ul li { line-height: 24px; display: block; height:
24px; font-size: 10px; color: #fff; text-transform: uppercase; font-
weight: normal; border-bottom: 1px solid #444; }
#header #nav li ul li:hover { background-color: #393939; }
#header #nav li.superfish li:hover ul, #header #nav .superfish li
li:hover ul { top: -999em; }
nav is the id of my ul, and I'm implementing like this:
$(document).ready(function(){
$(ul#nav).superfish({
delay: 500,
speed: 'slow'
});
});
Any ideas?
Superfish works by using the sfHover class instead of the normal
CSS :hover rules. You need the sfHover class to make the hovers work
in IE6 anyway, so when javascript is available the CSS class
'superfish' is added to the element you called superfish on and the
CSS changes :hover descendants of .superfish to remain hidden. It's
important that your sfHover rules override that and position the
submenus to be visible, just as your pure CSS :hovers will when
javascript is not available.
So that's the theory. The interplay of CSS rules overriding correctly
is kind of fiddly so in practice it is easiest to begin with the demo
CSS files so you have a working menu, then alter that CSS to style it
as you wish.
The hoverIntent plugin is not required for the timed delay on
mouseout to work - hoverIntent is only used (when it's available) to
provide a similar effect on mouseover.
Joel Birch.
