MenuItemRenderer not work for submenu

[dd1234]

I am trying to add a function to menu.
i.e. After a menuitem being clicked, it will turn to red color. The next time a user mouseover the menuitem, it will still be red.

My customMenuItemRenderer is CustomMenuItemRenderer.as
=========================
package test
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.menuClasses.MenuItemRenderer;
import mx.controls.Alert;

public class CustomMenuItemRenderer extends MenuItemRenderer
{

public function CustomMenuItemRenderer()
{
super();
addEventListener(MouseEvent.CLICK, setAccessed);
}

protected function setAccessed( event:Event ):void
{
this.setStyle("color","red");
}
}

My application is menu.mxml
=====================
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">

<mx:Style>
PopUpButton {
popUpStyleName: myCustomPopUpStyleName;
}

.myCustomPopUpStyleName {
fontWeight: normal;
textAlign: left;
}
</mx:Style>

<mx:XML id="xmlDP">
<root>
<node label="The quick brown fox jumped over the lazy dog." />
<node label="Lorem ipsum (disabled)." enabled="false" />
<node type="separator" />
<node label="parent">
<node label="child1" id="ch1">
<node label="child1-1" id="ch11"/>
<node label="child1-2" id="ch12"/>
</node>
<node label="child2" id="ch2"/>
<node label="child3" id="ch3"/>
</node>
<node label="parent (disabled)" enabled="false">
<node label="child1" />
<node label="child2" />
<node label="child3" />
</node>
<node type="separator" />
<node label="type=check" id="ch" type="check" toggled="true" />
<node label="type=check" id="ch" type="check" toggled="true" enabled="false" />
<node type="separator" />
<node label="1) type=radio" type="radio" groupName="radioGroup" toggled="true" />
<node label="2) type=radio" type="radio" groupName="radioGroup" />
<node label="3) type=radio" type="radio" groupName="radioGroup" />
<node label="4) type=radio" type="radio" groupName="radioGroup" enabled="false" />
</root>
</mx:XML>

<mx:Script>
<![CDATA[
import mx.controls.Menu;
import test.*;

private var menu:Menu;

private function init():void {
menu = new Menu();
menu.labelField = "@label";
menu.showRoot = false;
menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
menu.dataProvider = xmlDP;
menu.width = popUpButton.width;
popUpButton.popUp = menu;
}
]]>
</mx:Script>

<mx:PopUpButton id="popUpButton"
label="Please select an item"
openAlways="true"
creationComplete="init();" />

</mx:Application>

It works for top menu but not for submenu.
Do anyone know how to solve it?