[alatar]

Простейший пример для PopUpButton (собрано на коленке, не для продакшена)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
			</node>
		</fx:XMLList>
	</fx:Declarations>
	<local:PopUpTree dataProvider="{treeData}"/>
</s:Application>

PopUpTree

<?xml version="1.0" encoding="utf-8"?>
<mx:PopUpButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx"
				label="{tree.selectedItem.@label}">
	<fx:Script>
		<![CDATA[
			private var _dataProvider:Object;
 
			[Bindable(event="dataProviderChange")]
			public function get dataProvider():Object
			{
				return _dataProvider;
			}
 
			public function set dataProvider(value:Object):void
			{
				if( _dataProvider !== value)
				{
					_dataProvider = value;
 
					if (!label)
					{
						label = _dataProvider[0].@label;
					}
 
					dispatchEvent(new Event("dataProviderChange"));
				}
			}
 
		]]>
	</fx:Script>
	<mx:popUp>
		<mx:Tree id="tree"
				 width="200"
				 dataProvider="{dataProvider}"
				 labelField="@label"/>
	</mx:popUp>
</mx:PopUpButton>

А если хотите сделать нормальный компонент, то посмотрите исходники DropDownList и сделайте по аналогии, только вместо List используйте Tree (или сторонний аналог).