Linkcolor on submenus inherits the :hover one - css

Question

I'm trying to create a menu were the linkcolor should be white with a blue background. Problem is when you hover a submenu that has submenus. They "loose" the default black color and inherits (?) the white one making it all white.
http://jsfiddle.net/lasseedsvik/TzMxG/2/
Products + Category2 + .. in the fiddle...
What's missing to make all submenus links, that aren't hover, have a black color?
HTML
<ul class="topmenu">
<li class="topmenu-root-node">
Welcome
</li>
<li class="topmenu-root-node nonempty">
About
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'>A
</div>
</li>
<li class="topmenu-sub-item">
<div class='item'>B
</div>
</li>
</ul>
</li>
<li class="topmenu-root-node selected nonempty">
Products
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'>Category1
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class='item has-submenu'>Category2
</div>
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'>Product1
</div>
</li>
<li class="topmenu-sub-item">
<div class='item'>Product2
</div>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class='item'>Category3
</div>
</li>
</ul>
</li>
</ul>
CSS:
/* Top menu */
ul.topmenu {
position: relative;
z-index: 1200;
margin: 0;
height: 35px;
padding: 0 18px 4px 19px;
text-transform: uppercase;
}
ul.topmenu a {
text-decoration: none;
font-size: 14px;
}
ul.topmenu li {
z-index: 1200;
float: left;
list-style: none;
padding: 12px 10px 5px;
}
ul.topmenu li a:active {
}
ul.topmenu a:hover {
color: #333333;
}
ul.topmenu li a {
display: block;
color: #000;
}
ul.topmenu li.hover, ul.topmenu li:hover {
position: relative;
z-index: 1200;
}
.topmenu-root-node:hover {
background: url(css/images/menubg_hover.gif) repeat-x bottom;
}
/* LEVEL TWO */
.topmenu-sub-item li a {
}
ul.topmenu ul {
width: 220px;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 1200;
margin: 0;
padding: 0;
border: #000 1px solid;
}
ul.topmenu > li > ul {
border-top: none;
}
ul.topmenu ul li {
padding: 4px 6px 4px 13px;
float: none;
z-index: 1200;
/*background: url(css/images/menu_separator.png) bottom center no-repeat;*/
}
ul.topmenu ul li a {
color: #000;
border-right: none;
display: inline-block;
z-index: 1200;
font-size: 12px;
font-weight: normal;
}
ul.topmenu li:hover a {
color: #000;
}
ul.topmenu ul li:hover {
background: #0098c3;
color: #fff;
}
ul.topmenu ul li ul li a {
color: #000;
}
ul.topmenu ul li:hover a {
color: #fff;
}
.item a {
color: #000;
}
.topmenu-submenu-container {
background: #fff;
}
ul.topmenu ul ul {
left: 100%;
z-index: 1200;
top: 0;
}
ul.topmenu div {
cursor: pointer;
}
ul.topmenu div.has-submenu {
padding-right: 15px;
/*background: url(css/images/menuarrow.png) no-repeat right;
background-position: right;*/
}
.topmenu-root-node.selected {
font-weight: 700;
/*background: url(css/images/menubg_selected.jpg) repeat-x;*/
height: 28px;
}
.topmenu-root-node {
/*background: url(css/images/menubg.jpg) repeat-x;*/
height: 28px;
}
UPDATE:
http://jsfiddle.net/lasseedsvik/TzMxG/4/
Fixed thanks to Jonas! :)

Answer 1

There's no need for all that javascript.
http://jsfiddle.net/jonigiuro/TzMxG/3/
You can use the ">" selector which means pick the one that comes right after it
.element > a
will not include all the a's in your .element, avoiding the style overwriting
ul.topmenu ul li:hover > a {
color: #fff;
}