Posted by Ben C on 11/07/06 09:51

On 2006-11-06, z <news01.web@mailnull.com> wrote:
[snip]
> I don't have a server that I can post it on at the moment. Here is the
> entire file though: http://pastebin.ca/raw/241965
>
> Unfortunately the green line gets obscured by the dropdowns. I don't know
> if there is a way around that.

Just add a margin-top to #mainMenu li ul.

> The list-style-image that I added didn't seem to work either.

You don't see the bullets at all, or you see them, but they're in the
wrong place?

> Other than that, it almost looks exactly right. Also need to look
> into how to make a delay for the dropdowns with JavaScript if that is
> possible. So that when the mouse leaves the sub-menus, there is a
> momentary delay before they disappear.

Should be able to do that with onmouseout and setTimeout.

A quite nice way to do that kind of thing is rather than set individual
styles in the JS, just change classes.

So where you've now got descendent selectors involving :hover, instead
have

ul.visible
{
display: block;
etc.
}

ul.invisible
{
display: none;
}

Then use onmouseover and onmouseout to change the class attributes of
the elements you're controlling to visible or invisible.

I think it's something like node.setAttribute("class", "visible");

This way all the styling information stays in the CSS, the JS just turns
it on and off.

[Back to original message]