Questions about #current and a:active for menus...

[wanchman]

I have one main menu and a number of sub menus, a completely normal structure in other words. When you do a mouseover the different manu options I want the text to change character (underlined and with a darker color), I also want this change to remain on the active link when you have clicked on it. So far no problems.

.moduletablemainmenu a:hover, .moduletablemainmenu a:active, .moduletablemainmenu li#current a {
border-bottom: 4px solid #97A6D4;
color: #4B4B4D;
}

(Note that the #current state doesn't make any difference at the moment and might as well be cut out)

But... There are two things that I just can't figure out:

1. I want the main menu to keep it's "active" look even after I clicked on a sub menu (that will also get an "active" appearance). This will result in two different menus that are both active at the same time. Can this be done on a dynamic web page and – if so – how?

2. I want the specific look (the darker text color and the underlining) to only apply to one menu alternative at a time – i.e., on mouseover on a menu, the active link will loose it's specific look as it applies to the alternative under the cursor at that moment. On mouseout the active alternative should regain it's properties. How do I do that?