My main Joomla real estate website uses a variation the Rocket Themes club Affinity style 4. I also needed to re-skin my Atahualpa theme based WordPress blog site to match that RT/Affinity style. The standard Atahualpa style setup menus were able to handle most of these modifications, which is one reason I love the Atahualpa theme in general. However, I still had to develop custom css for the UIDX Menu Creator plugin.

I wanted the same menu item highlighting as the Joomla theme, which includes a radio button on the left of the menu item that changes color when the mouse is over that item. The other menu colors also needed to match. To get the radio button behavior, I simply copied the RT/Affinity style 4 dark radio button png file to my WP themes/images folder, to make it available to all of my WP themes. I then set up some special background image statements in the Menu Creator css, and modified some of the menu item margins to allow for the radio button.

To complete the skinning, I also had to do fairly heavy hacking of the Atahualpa css.php file to replicate the styling of the RT/Affinity sidebar list items, but that is a subject for separate post.

The final Menu Creator specific css is shown below:

/*
============= UIDX Menu Maker css =============
With major mods by Ron Goodman for RT/Affinity-like menus on: 

http://blogs.denverhomevalue.com

For Ultimate IDX menu maker plugin
and requires div container like:
<div id="mc_menu_1" class="mc_topnavigation"> ...menu maker parms... </div>
or
<div id="mc_menu_1" class="mc_vertical"> ...menu maker parms... <div>
Class names are self explanatory.
topnavigation is a drop down menu, and supports up to 4 menu levels.
vertical is a left panel only slide-out menu, and also supports up to 4 menu levels.
The css will support the same menu in either location with different color schemes.
Make your own color and font mods as required.
Minimal graphics buttons are used for highlighting.
*/
/*=-=-=-[Navigation]-=-=-=*/
.mc_topnavigation {
	position: relative;
	top: -6px;
	width: 95%;
	height: 32px;
	margin: 0;
	padding: 0;
	z-index: 99;
	font-size: 12px;
	line-height: 1.4em;
	font-family: Arial, Tahoma, Verdana;
	text-color: white;
}
.mc_topnavigation li ul
	{
	z-index: 999;
	background-color: #660000;
	border-left: 3px solid #B6B58D;
	border-right: 3px solid #B6B58D;
	border-bottom: 4px solid #B6B58D;
	border-top: 1px solid #B33B3B;
	padding-right: 20px;
}
.mc_topnavigation a, .mc_topnavigation a:visited, .mc_topnavigation a:link {
	color: white;
	width: auto;
}
.mc_topnavigation li ul {
	width: 44em; /*IE6 soils itself without this*/
}
.mc_topnavigation li {
	float: left;
	background-color: #660000;
}
.mc_topnavigation li ul li {
	width: 12em;
	border-bottom: 1px solid #B33B3B;
	padding-top: 6px;
}
.mc_topnavigation li li li,
.mc_topnavigation li li li li
{
	width: 100%;  /* IE needs this or doesn't display sub-menus */
}
.mc_topnavigation li a, .mc_topnavigation a:visited, .mc_topnavigation a:link {
	text-decoration: none;
	color: #fffccc;
	margin: 2px 4px 12px 6px;
	padding-left: 16px;
	background: url(/wp-content/themes/images/radio-button-dark.png) 0 -3px no-repeat;
/*	modify radio button name and folder to suite you */
}
.mc_topnavigation li a:hover, li a.sfhover {
	text-decoration: none;
	color: white;
	margin: 2px 4px 12px 6px;
	padding-left: 16px;
	background: url(/wp-content/themes/images/radio-button-dark.png) 0 -125px no-repeat;
/*	modify radio button name and folder to suite you */
}
/* Below is the key to displaying uls of sub-menus to right of its parent li */
ul.mc_topnavigation .current ul,
ul.mc_topnavigation ul li:hover ul,
ul.mc_topnavigation ul li.sfHover ul {
	left: 0;
	top: 2.4em; /* match top ul list item height */
}
/************  Start Vertical *******************/
.mc_vertical {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width: 12em;
	height: auto;
	z-index: 98;          /* 1 less than horizontal menu bar so topnav takes priority */
	background: #ffff99;
	font-size: .85em;
	font-family: Arial, Tahoma, Verdana;
	color: black;
	font-weight: bold;
	text-transform: uppercase;
}
.mc_vertical a, .mc_vertical a:visited, .mc_vertical a:link {
	padding: 0;
	background: #ffff99;
	color: black;
	width: 80%;
}
.mc_vertical a:hover, .mc_vertical a.sfhover {
	background: #ffff66;
}
/* !!! Critical difference between topnavigation and vertical !!! */
/* for vertical menus, start expand right at top level menu's li */
.mc_vertical li ul {
	margin: -2.6em 0 0 10em;
}
.mc_left_pane li ul {
	margin: -2.6em 0 0 10em;
}
.mc_right_pane li ul {
	margin: -2.6em 0 0 -10em;
}
.mc_vertical li {
	width: 80%;
	float: left;
	z-index: 98;
}
/****************  End Vertical  ****************/

/*** Following is common to both vertical and topnav ***/
ul#mc_menu_1 {
	list-style-type: none !Important;
	float: left;
	z-index: 99;
	text-decoration: none;
}
#mc_menu_1 a, #mc_menu_1 a:visited, #mc_menu_1 a:link {
	display: block;
}
#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited {
	float: none;
	text-transform: none;
}
#mc_menu_1 li:hover ul {
	left: auto;
	display: block
}
#mc_menu_1 li ul {
	position: absolute;
	width: 12em;
	left: -999em;
	z-index: 99;
}
#mc_menu_1, #mc_menu_1 ul {
	padding: 0;
	list-style: none;
	line-height: 1;
}
#mc_menu_1 li ul ul ul,
#mc_menu_1 li ul ul {
	margin: -2.75em 0 0 12em;
}
/*=-=-=-[End Navigation]-=-=-=*/

/*=-=-=-[Level 4]-=-=-=*/
#mc_menu_1 li:hover ul ul,
#mc_menu_1 li:hover ul ul ul,
#mc_menu_1 li:hover ul ul ul ul,
#mc_menu_1 li.sfhover ul ul,
#mc_menu_1 li.sfhover ul ul ul,
#mc_menu_1 li.sfhover ul ul ul ul {
	left: -999em;
}
#mc_menu_1 li:hover ul,
#mc_menu_1 li li:hover ul,
#mc_menu_1 li li li:hover ul,
#mc_menu_1 li li li li:hover ul,
#mc_menu_1 li.sfhover ul,
#mc_menu_1 li li.sfhover ul,
#mc_menu_1 li li li.sfhover ul,
#mc_menu_1 li li li li.sfhover ul {
	left: auto;
}
/*=-=-[Browser specific hacks from various web sources]-=-=*/

* html ul#mc_menu_1
{
	display: inline-block;	/* this is for IE/Mac. it forces IE/Mac to
						   expand the element's dimensions to contain
						   its floating child elements without a
						   clearing element. */
	/* \*/ display: block;	/* override above rule for every other
						   browser using IE/Mac backslash hack */
	position: relative;	/* IE 5.0/Mac needs this or it may clip the
						   dropdown menus */
	/* \*/ position: static; /* reset position attribute for IE/Win as it
						   causes z-index problems */
}
* html ul#mc_menu_1 ul
{
	float: left;		/* IE/Mac 5.0 needs this, otherwise hidden
					  	   menus are not completely removed from the
					   	   flow of the document. */
	/* \*/ float: none;	/* reset the rule for non-Macs */
}
ul#mc_menu_1 ul
{
	background-color: #fff;	/* IE/Win (including 7) needs this on an object
						   that hasLayout so that it doesn't "look through"
						   the menu and let any object (text) below the
						   menu to gain focus, causing the menu to
						   disappear. application of this rule does not
						   cause any rendering problems with other browsers
						   as the background color his covered by the
						   menu itself. */
}
* html ul#mc_menu_1 li,
* html ul#mc_menu_1 mc_topnavigation li
{
						/* the second selector above is there
					   	   because of problems IE/Mac has with
					   	   inheritance and what rules should take
					   	   precedence. and to serve as a reminder on
					   	   how to work around the issue if it's
					   	   encountered again down the road. */
	width: 100%;
	float: left;
	clear: left;		/* IE likes to stick space below any LI
					 	   in :hover state with a sub-menu. floating
					 	   the LIs seems to work around this issue. But
						   note that this also triggers hasLayout
					 	   because we need a width of 100% on floats. */
}
*:first-child+html ul#mc_menu_1 > li:hover ul/* hide from IE5.0 because it gets confused by this selector */
{
	min-width: 0;		/* this fixes a similar problem as described in the
					   	   rule set that exists in IE7 (and later?). However
					   	   the whitespace only appears when the LI element is
					   	   in a :hover state. */
}
ul#mc_menu_1 li a
{
	position: relative;	/* trigger hasLayout for IE on anchor
						   elements. without hasLayout on anchors
						   they would not expand the full width
						   of the menu. this rule may not trigger
						   hasLayour in later versions of IE and
						   if you find this system broken in new
						   versions of IE, this is probably the
						   source. */
	min-width: 0;		/* triggers hasLayout for IE 7 */
}
* html ul#mc_menu_1 mc_topnavigation li
{
	width: 8em;		/* IE Mac doesn't do auto widths so specify a width
						   for the sake of IE/Mac. Salt to taste. */
	/* \*/ width: auto;		/* now undo previous rule for non Macs by using
						   the IE Mac backslash comment hack */
}