Suckerfish Menu - teething issues

Hi,

I'm trying to implement a suckerfish style drop down menu. I'm using the Son of suckerfish menu (http://www.htmldog.com/articles/suckerfish/dropdowns/) from HTML Dog for this, slightly modified for my needs.

I've got it mostly working how I want, however I'm having a couple of issues that I hope someone can help with.

See http://s129759989.websitehome.co.uk/ for my current progress.

1) The blue highlight in the bar when you hover over a menu disappears when you move your mouse down to a sub menu item. Is there any way to make the blue highlight stick around while hovering over any item in the menu?

2) As well, in IE, the drop down disappears as soon as you try and move your mouse down on to it.

Relevant code:


<ul id="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>



#nav, #nav ul {
list-style: none;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #0066CC;
}

#nav a {
display: block;
}

#nav li {
float: left;
}

#nav a, #nav .here {
padding: 18px 18px 3px 20px;
}

#nav ul li {
clear: left;
padding: 0;
}

.here, #nav a:hover, #nav a:focus {
background-image: url(../graphics/background.nav.gif);
background-repeat: repeat-x;
background-position: top;
}

#nav ul li a {
padding: 2px 18px 2px 20px;
text-transform: none;
}

#nav ul li a:hover, #nav ul li a:focus {
background-image: none;
}

#nav li ul {
position: absolute;
left: -999em;
z-index: 10;
}

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


Thanks in advance for any help.

1) The blue highlight in the bar when you hover over a menu disappears when you move your mouse down to a sub menu item. Is there any way to make the blue highlight stick around while hovering over any item in the menu?
In that case the interesting selector is the one that selects the first-level li:hover elements and not the first-level a:hover elements which is what you have now.

The reason why the latter selector does not work is because, by construction of the menu, the second level ul elements are not nested within the first-level anchor elements. However, they are nested within the first-level li elements.

2) As well, in IE, the drop down disappears as soon as you try and move your mouse down on to it.
I see the weirdness going on in both IE6 and IE7. But I don't know the explanation. What is happening is that the onmouseout event is fired even when it should not. Interestingly, the issue does not occur when the document type declaration is removed.

It seems as if the problem can be solved by applying a background color to the second level ul elements. Perhaps you can use this as a temporary fix. In the meantime, perhaps someone here can provide an explanation of the bug.

Thanks for your reply.

In that case the interesting selector is the one that selects the first-level li:hover elements and not the first-level a:hover elements which is what you have now.

The reason why the latter selector does not work is because, by construction of the menu, the second level ul elements are not nested within the first-level anchor elements. However, they are nested within the first-level li elements.

I tried applying the hover style to #nav ul li:hover but then of course the blue background appears on each individual <li>, not the parent link. My next thought was that it would have to go on #nav ul:hover but that apparently does nothing at all - do hovers not work on that element?

Am I going to need JavaScript to do this? :(

It seems as if the problem can be solved by applying a background color to the second level ul elements. Perhaps you can use this as a temporary fix. In the meantime, perhaps someone here can provide an explanation of the bug.

Ah, good one. This'll be fine as long as ends up working with transparent backgrounds too. Would still be interested to know why this bug is happening though.

I tried applying the hover style to #nav ul li:hover but then of course the blue background appears on each individual <li>, not the parent link. My next thought was that it would have to go on #nav ul:hover but that apparently does nothing at all - do hovers not work on that element?
The correct selector is this one. For simplicity I am just changing the background color instead of using a background image.

#nav > li:hover {
background: red;
}

The direct child combinator “>” ensures that the li elements from the second level menu do not get the hover style applied.

Unfortunately, IE6 does not support the direct child combinator, so the workaround is to do like this:

#nav li:hover {
background: red;
}
#nav li li:hover {
background: transparent;
}

Now, since IE6 does not support the :hover pseudo-class on other elements than anchor elements with an href attribute, we arrive at this (employing the JavaScript that changes the class of the li elements onmouseover/onmouseout):

#nav li:hover, #nav li.sfhover {
background: red;
}
#nav li li:hover, #nav li li.sfhover {
background: transparent;
}

Ah, good one. This'll be fine as long as ends up working with transparent backgrounds too.
I'm afraid that IE6/7 cannot be cheated that easily by setting a transparent background color which is the default value. Can you not just set the background color to the same value as the underlying element?

Ah yeah, apply the hover style to all the list items, then remove it again with a more specific style, got ya :thumbsup:

Re:the transparent background, I meant a semi-transparent .png, as this is what I will likely end up using. We shall see if it works out...