The idea was simple:

1. change li background color on hover to one color

   ul#menu li a:hover {...}
   

2. change it on mouse press to the other color

   ul#menu li a:active {...}
   

3. return the color to the original (normal) if the link is neither hover nor pressed

The problem appeared to be that, if user rejected his intention and lets the mouse up away from the link, the back color stays as if it was pressed.

Then I tried to research and came up with this:

    ul#menu li a:hover:active {...}

It became better, and the link is not marked with special back color in a normal state after user presses the link and rejects. But the "on-hover" back color became equal to the active one.

So it looks like the link gets "active" state and stays in it even after user releases mouse button.

Hate to write this, but I am very new to html and css. So I may be missing something very basic here.

Could you, please, suggest any way, how to achieve my goal?

EDIT

I've read this source CSS Styling links (thought there could be some other state to use instead of active), but found nothing suitable there...