CSS: Could not override inherited text-decoration property

I'm going to use such CSS table for my menu:

.menu {text-decoration:underline;}
.menu a:link {text-decoration:none; color:#0202C0}
.menu a:active {text-decoration:none; color:#0202C0}
.menu a:visited {text-decoration:none; color:#0202C0}
.menu a:hover {text-decoration:underline; color:#0099FF}

but while trying to apply it to the document

<span class="menu">
   Some underlined text came here... 
   <a href="...">开发者_StackOverflow中文版this text should not be underlined until mouse on!</a>
</span>

I found unexpected behavior: link text always stay underlined. What I'm doing wrong? Could it depends on browser (I'm using Mozilla Firefox 3.5.6, probably IE 6.0 display it properly)? If so, how can I rely CSS at all? What should I use to substitute it?

(In fact usually I got learned new programming languages very quickly and never had any problems with programing basis until I started HTML and CSS. Either I'm incompatible with it or its features was never recounted well enough.)

After a quick play with some CSS, a workaround (which is horrid, but does work) would be to do the following in your CSS:

.menu span {text-decoration:underline;}

... in place of the first line of your sample CSS. Then in the HTML do the following:

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

It's far from being perfect, but is the best I can come up with for the moment.

Ensure that it is a valid link inside of the href. If you do not supply this style:

.menu a, .menu a:link{my styles}

and the href has no contents, some browsers will not treat it as a link and do default text rendering. For example, <a href=""> will not take on the style of .menu a:link, it will go to the default .menu styles because there is no link and it is not rendered as such by some browsers.

Of course, cover your bases by including the bare a in your selector.

Additionally, make sure you end those color styles with semicolons for proper CSS syntax.

Have you tried adding:

.menu a {text-decoration:none}

before all the other rules? Just to establish a default which is then overridden by the a:hover rule.

To the text you want to underline, use <u>blabla</u> (do it the HTML way). This won't inherit and your next link won't come out underlined.