The items hover of DropDownList's itemRenderer

Question

I have a DropDownList and an itemRenderer for it on related skin. My itemRenderer's items are SWFLoader object which show the swf files in my DropDownList. Height of each row must be 27px, So I decreased the height and width of my SWFLoader object to make them fit in each row, and also set these atts:

verticalCenter="2" verticalAlign="middle"

to align them in each row. But as contents of my SWFLoader have different width/height, I have problem of item's mouse hovering which overlap each other. I also set these for my SWFLoader, but still no changes:

mouseEnabled="false" mouseChildren="false"

Here is a brief of my code:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true" 
            height="27" width="100%">
<fx:Script>
    <![CDATA[           
        override public function set data(value:Object):void{
            super.data = value;
            // rest of codes
        }           
    ]]>
</fx:Script>

<s:SWFLoader left="5" right="5"
             height="65"
             verticalCenter="2" verticalAlign="middle"
             mouseEnabled="false" mouseChildren="false" 
             source="{data}" smoothBitmapContent="true" />

Any advice?!

Answer 1

The problem was that the SWFLoader was catching the mouse events. So I just placed it in a Canvas and set mouseChildren="false" for ItemRenderer. Also set scroll policies of Canvas to 0:

horizontalScrollPolicy="off" verticalScrollPolicy="off"

Now the SWFLoader does not catch the mouse events and hovering items in dropDownList do not overlap each others.

P.S: Thanks one of my colleagues to help me about :)