a:hover conflict

[Webfoot]

I have placed a small text/css script in the head of my index.htm:

<style type="text/css">
<!--
A:hover { COLOR: red; font-weight: none }
-->
</style>

which successfully changes the links on my page to red on mouseover. However, I also have an external CSS script for a vertical dropdown menu on the same page which contains a command for hover, as follows:

.glossymenu li a:hover{
background: aqua;
}

This command also works successfully to change the sub-menu links on the vertical dropdown menu to aqua color on mouseover.

The conflict is this: The A:hover for color:red is affecting the links in the dropdown menu. They not only change background color to aqua on mouseover, most the text of them (not all of them) turn red simultaneously.

So, the question becomes "How can I have my cake and eat it too?" In other words: What do I need to do so that only those links which are not part of the vertical menu turn red on mouseover? This is baffling.

Thank you one and all.

[Jutlander]

First off, you've forgotten a semicolon right after font-weight: none.

Can you please post all of your code. That will make it easier to get the bigger picture.

[lithriel]

Seems to me that the easy solution would be to declare a color for .glossymenu
links.

.glossymenu li a:hover { background: aqua; color: #000;}

P.S. Jutlander, the semicolon is not required after the last declaration at the end of a declaration block. It's actually optional.

[Jutlander]

Originally Posted by lithriel

P.S. Jutlander, the semicolon is not required after the last declaration at the end of a declaration block. It's actually optional.

I don't know, but it is good practice and will leave the most minimal margin for error, possible.

[Webfoot]

I've gone with the easy way, thanks to lithriel. And it works like a charm! Thank you thank you.

Case closed.