Implement Flex transparent menu without border

In Flex, we found the background and border can not be removed from menu bar, in fact, this is because of the attributes of default Skin. using mx.skins.halo.MenuBarBackgroundSkin, no matter how you set up, the skin will draw background and the border. 
 

To remove the border,  we need to customize skin to replace MenuBarBackgroundSkin. This is my skin as follows:
 

 

 

//MenuBarNoBorderFillSkin.as:

package com.foxarc.skin
{
 import mx.skins.ProgrammaticSkin;
 import flash.display.Graphics;
 public class MenuBarNoBorderFillSkin extends ProgrammaticSkin
 {
  public function MenuBarNoBorderFillSkin ()
  {
  super ();
  }
 }
}

 

//MenuBarActiveSkin.as:

package com.foxarc.skin
{
  import mx.skins.ProgrammaticSkin;
  import flash.display.Graphics;
  import mx.utils.ColorUtil;
  public class MenuBarActiveSkin extends ProgrammaticSkin
  {
    public function MenuBarActiveSkin ()
    {
    super ();
    }
     override protected function updateDisplayList( w: Number, h: Number):void
    {
     var backgroundAlpha: Number = getStyle ( "backgroundAlpha");
     var rollOverColor: uint = getStyle ( "rollOverColor");
     graphics.clear ();
     drawRoundRect (0,0, w, h , 5, rollOverColor, backgroundAlpha );
     }
  }
}

 

Testing code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 verticalScrollPolicy="off" horizontalScrollPolicy="off">
  
 <mx:MenuBar labelField = "@ label" dataProvider = "(menubarXML.menuitem)" width = "100%" backgroundSkin = "com.foxarc.skin.MenuBarNoBorderFillSkin" itemDownSkin = "com.foxarc.skin.MenuBarActiveSkin" itemOverSkin = " com.foxarc.skin.MenuBarActiveSkin "/>