How do I customize Flex MenuBar popup/dropdown list items to display with alternating background colors, and specific text color?

I have a Flex application where I have a MenuBar with submenu drop-down lists.  If a top level item on the MenuBar is clicked, a submenu list drops down with several items listed.  The problem is that the submenu list is completely blank/white, with no text showing up either (the text color of the top level MenuBar is set to white, as you can see in my code below, but how do I set a different submenu text color?).  When I rollover an item in the submenu, it gets highlighted with a blue background and grey text shows up ok.  But then when I roll off of it, it again goes back to blank/white.  What I need to be able to do is specify what the "non-rollover" background color and text color should be.  

Additionally, I would ideally like to be able to assign alternating background colors to the items in the submenu list.  Please let me know if anyone has any ideas.  Thanks.
<mx:MenuBar id="mainMenuBar" x="0" y="0" width="100%" height="40" labelField="label" itemClick="handleSubMenuBarClickEvent(event);" dataProvider="{menuBarArrayCollection}" color="#FFFFFF" fontSize="14" fontWeight="bold"/>

Open in new window

robbersrowAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gary BenadeCommented:
You have set the text color to white, change it to something else, like black

<mx:MenuBar id="mainMenuBar" x="0" y="0" width="100%" height="40" labelField="label" dataProvider="{menuBarArrayCollection}" color="#000000" fontSize="14" fontWeight="bold"/>

Open in new window

0
robbersrowAuthor Commented:
The problem with that is that I need the text color to be white for the top level MenuBar.  So I would need to be able to set the submenu text color to a different color than the top level MenuBar, or be able to set the default submenu background color to something other than white.
0
Gary BenadeCommented:
Add this to your css style file
.blackFont
{
    fontSize: 15;
    color: #000000;
}

and add this to your menubar declaration
menuStyleName="blackFont"
0
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

robbersrowAuthor Commented:
I am not using style sheets.  Can you think of any way to do it directly inline in the flex component?
0
Gary BenadeCommented:
You could inline styles in your mxml
	<mx:Style>
		.blackFont
		{
		    fontSize: 15;
		    color: #000000;
		}		
	</mx:Style>
    <mx:Panel styleName="blackFont">

Open in new window

0
robbersrowAuthor Commented:
I tried this, but because I have specified a font color of white in the component (from my original code snippet above), this inline declaration overrides the <mx:Style> font declaration.  The reason for my needing to preserve the white color is because that is the text that the user sees in the actual MenuBar (before any dropdowns are selected), and goes with the overall design of the site.

But this still leaves me stuck with white text for the dropdown menus.  Even more of a problem is that I do not know how to specify the background color of the dropdown menus.  Please let me know if you know how to specify this inline or using <mx:Style>.  And/or if you can think of any way to solve my text color dilemma.
0
Gary BenadeCommented:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:XMLList id="mainMenu">
        <menuitem label="File" >
            <menuitem label="Save" data="save"  />
            <menuitem label="Save As.." data="saveas"  />
            <menuitem label="Exit" data="exit"  />
        </menuitem>
    </mx:XMLList>
	<mx:Style>
		.whiteFont
		{
		    fontSize: 15;
		    color: #FFFFFF;
		}		
		.blackFont
		{
		    fontSize: 15;
		    color: #000000;
          	    backgroundColor: #FFFFFF;
		}		
	</mx:Style>    
    <mx:MenuBar dataProvider="{mainMenu}" labelField="@label" styleName="whiteFont" menuStyleName="blackFont"/>
</mx:Application>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
robbersrowAuthor Commented:
Great solution.  Thank you for your help and code examples.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.