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">
<a href="/">Welcome</a>
</li>
<li class="topmenu-root-node nonempty">
<a href="/About">About</a>
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'><a href="/A">A</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class='item'><a href="/B">B</a>
</div>
</li>
</ul>
</li>
<li class="topmenu-root-node selected nonempty">
<a href="/Products">Products</a>
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'><a href="/Category1">Category1</a>
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class='item has-submenu'><a href="/Category2" class="topmenu-hassubmenu">Category2</a>
</div>
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class='item'><a href="/Product1">Product1</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class='item'><a href="/Product2">Product2</a>
</div>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class='item'><a href="/Category3">Category3</a>
</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! :)