Help With CSS

Need help with this please.

[vancer]

I use a css to produce a tab-like menu bar.

The css is:

a.menu { background-image: url(images/menu-2.gif); color: #FFFFFF; height: 20px; width: 70px; font-size: 12px; font-weight: normal; background-attachment: fixed; background-repeat: no-repeat; background-position: left bottom; text-align: center; font-style: normal; text-decoration: none; line-height: 20px}

.menu:hover { background-image: url(images/menu-white.gif); color: #000099; background-attachment: fixed; background-repeat: no-repeat; background-position: left bottom; height: 20px; width: 70px}

QUESTION:

I would like to be able to keep the white hover(ed) image showing when each tab is clicked i.e. when the page is active.

a.menu:active does not work.

Thanks in advance.

<No sigs or URLs, please. See TOS [webmasterworld.com]>

[edited by: tedster at 8:35 pm (utc) on Jan. 8, 2004]

[TryAgain]

One way to do -what I think you want- is to create a second pseudo class.
For example:
a.selected:link { background-image: url(images/menu-white.gif); color: #000099; background-attachment: fixed; background-repeat: no-repeat; background-position: left bottom; height: 20px; width: 70px}
and apply this class to the link in question on the page in question.

[phoenix09]

The CSS also has to cascade correctly, like this:

a:link
a:visited
a:hover
a:active

Each overrides the one before it, but if a:active isn't declared it just goes to the default behavior, I think anyway, and if it's not last it won't work right.