Geek Answers Handbook

CSS menu - active link in parent node color change when focus is on child node

I have a vertical CSS menu that I created the code below. (The testing page is at http://www.candyundies.com/test.php ).

My problem is that when you go to the submenu, the highlighted “li” in the parent node returns to the hover color (# 297BCE). I want it to stay white (#FFF), as if you were hanging. I went crazy trying to find what I am doing wrong. Any ideas what I am missing?

<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">See 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>
0
css menu
source share
1 answer

You only need to apply white color to the immediate child link when the 1st level li freezes. So use the syntax of the child selector (>)

Add this declaration to your CSS:

 #navigation li:hover > a{ color:#fff; }

See: http://jsfiddle.net/MVKLC/
for implementation

+2
source share

More articles:


All Articles