How To Highlight Parent <Li> When Child <Li> Is Active In Dropdown Menu, Using Cmenu ?


I have superfish drop down menu. HTML is rendered with CMenu class. When user clicks on some link in menu, .active class is added to that link to highlight it. What I want is: when user clicks on some sub-menu link, I want it’s parent to be highlighted as active too. I tried by setting ‘activateParents’=>true, but then all <li>'s in submenu are highlighted as active + parent. But ofcourse that is wrong, only one active <li> plus his parent should be highlighted. I tried with several jQuery solutons like this one, but it didn’t work.

Here is the Menu code :

<!-- Navigation -->

		<div id="mainmenu">	


			<?php $this->widget('zii.widgets.CMenu',array(





					array('label'=>'Home', 'url'=>array('/site/index')),

					array('label'=>'Link 1', 'url'=>array('/site/page_1')),

					array('label'=>'Link 2', 'url'=>array('/site/page_2'), 'items'=>array(

						array('label'=>'Child link 1', 'url'=>array('/site/child_page_1')),

						array('label'=>'Child link 2', 'url'=>array('/site/child_page_2')),

						array('label'=>'Child link 3', 'url'=>array('/site/child_page_3')),

						array('label'=>'Child link 4', 'url'=>array('/site/child_page_4')),


					array('label'=>'Link 3', 'url'=>array('/site/page', 'view'=>'about')),

					array('label'=>'Link 4', 'url'=>array('/site/contact')),

					array('label'=>'Link 5', 'url'=>array('/site/page_5')),				

					array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)


			)); ?>			



<!-- ENDS Navigation -->	

Here is the CSS:

/* NAVIGATION ------------------------------------------------------------*/


	display: block;

	margin-left: 15px;	

	margin-right: 36px;

	padding-top: 15px;

	margin-bottom: 10px;


#mainmenu li{

	float: left;

	position: relative;

	display: block;

	height: 40px;

	background: url(../img/nav-item.png) no-repeat transparent;

	border-bottom: 1px solid #000000;

	border-top: 1px solid #141414;

	padding-left: 4px;

	padding-bottom: 1px;


#mainmenu li:first-child{ border-top: none; }

#mainmenu li:last-child{ border-bottom: none; }	

#mainmenu li:hover,


	background-position: 0px -40px;


#mainmenu li a:hover{

	color: #ecc731;	



#mainmenu a{

	color: #ecc731;


#mainmenu li ul{

	padding-left: 20px;

	padding-right: 10px;

	background : url('../img/dropdown.png') no-repeat top left;

	color: #e2e2e2;


#mainmenu a{

	display: block;

	position: relative;



.sf-menu ul {

	position:		absolute;

	top:			-999em;

	width:			200px; /* left offset of submenus need to match (see below) */


.sf-menu ul li {

	width:			100%;


.sf-menu li:hover {

	visibility:		inherit; /* fixes IE7 'sticky bug' */


/*** LEFT ***/

.sf-menu {

	float:			left;

	margin-bottom:	1em;


.sf-menu a {

	padding: .75em 1em;



/*** adding vertical menu ***/

.sf-menu, .sf-menu li {

	width:	234px;


/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

	left:	200px; /* match ul width */

	top:	0;


Do anyone have any idea how this can be done ?

I have solved the problem. The problem was with CSS. Pay attention on this part :


	color: #ecc731;


I needed to add > between active a, because without it yii would select and apply active class to all child classes. > is child combinator and it makes sure that only direct child element is selected.

CMenu rocks, Yii rocks, I can not believe how good this framework is :D