I've designed a CSS vertical menu with the code provided below. You can view the test page at .
The issue I'm facing is that when hovering over the sub-menu items, the highlighted 'li' in the parent node reverts back to the non-hover color (#297BCE). I would like it to remain white (#FFF) as it does when hovered over. I've been struggling to identify what I might be missing. Any suggestions on what I could be overlooking?
<style>
#categories {
background-color:#297BCE;
width:214px;
height:37px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
position:absolute;
top:67px;
padding-top:10px;
z-index:3;
font: bold 15px Arial, sans-serif; color:#FFFFFF;
}
#navigation { position:absolute;font-size:0.75em; width:214px;top:115px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */
ul.top-level {background:#fff;}
ul.top-level li {
font-family: arial, sans-serif;
font-size:14px;
font-weight:bold;
border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5;
background:#fff url(images/arrow.gif) no-repeat center right;
}
/* FIRST LEVEL TEXT COLOR */
#navigation a {
display:block;
color: #297BCE;
cursor: pointer;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:214px;
}
/* FIRST LEVEL TEXT HOVER COLOR */
#navigation a:hover{
color: #FFF;
text-decoration:none;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR */
#navigation li:hover {
background-color:#297BCE;
position: relative;
}
#navigation li{
background-color:#FFF;
position: relative;
}
/* SECOND LEVEL TEXT SETTINGS */
ul.sub-level li a{
font-family: arial, sans-serif;
font-size:12px;
font-weight:normal;
background-color:#FFF;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
position: absolute;
display: block;
background: #FFF;
border: #A5A5A5 solid;
border-width: 1px;
/* set the sub menu flyout position here */
left: 207px;
top: -15px;
z-index:10;
}
/* SECOND LEVEL TEXT HOVER COLOR */
#navigation ul li ul li a:hover{
color:#f90;
background-color:#FFF;
text-decoration:underline;
}
#navigation ul ul{
padding-top:5px;
padding-bottom:5px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: 0px 3px 10px #B0B0B0;
}
#navigation ul li ul li a{
text-indent: 20px;
line-height: 17px;
}
ul.sub-level li {
background:#fff;
border:1px solid #D2D2D2;
border-color:#FFF #FFF #FFF #FFF;
float:left;
}
</style>
<div id="categories">View All Categories</div>
<div id="navigation">
<ul class="top-level">
<li><a href="#">Home</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li>
<a href="#">FAQ</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li>
<a href="#">News</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
</ul>
</div>
</div>