/*
============================== UIDX Menu Maker css =================================
With major mods by Ron Goodman:
http://blogs.denverhomevalue.com
Supports menu maker plugin and requires div container
...menu maker parms...
or
...menu maker parms...
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 mods as required. Minimal graphics buttons are used for highlighting.
*/
/*=-=-=-[Navigation]-=-=-=*/
.mc_topnavigation {
position: relative;
top: -6px;
width: auto;
height: 32px;
z-index: 99;
font-size: 12px;
line-height: 1.4em;
font-family: Arial, Tahoma, Verdana;
text-color: white;
}
.mc_topnavigation li {
float: left;
background-color: #660000;
}
.mc_topnavigation li ul
{
z-index: 999;
background-color: #660000;
border-left: 3px solid #F9EDCC;
border-right: 3px solid #F9EDCC;
border-bottom: 4px solid #F9EDCC;
border-top: 1px solid #B33B3B;
position: absolute;
padding: 0;
margin: 0;
left: -999em; /* Hides sub-menus when their LI is not hovered */
width: 13.5em; /* IE6 soils itself without this*/
}
.mc_topnavigation li ul li {
width: 13.5em;
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 {
color: #fffccc;
background: url(/wp-content/themes/images/radio-button-dark.png) 0 -3px no-repeat;
}
.mc_topnavigation li a:hover,
.mc_topnavigation li a.sfhover {
color: white;
background: url(/wp-content/themes/images/radio-button-dark.png) 0 -125px no-repeat;
}
.mc_topnavigation li a,
.mc_topnavigation a:visited,
.mc_topnavigation a:link,
.mc_topnavigation li a:hover,
.mc_topnavigation li a.sfhover {
text-decoration: none;
margin: 0 4px 0 4px;
padding: 2px 0 8px 18px;
}
/* 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.6em; /* match top ul list item height */
}
.mc_topnavigation li ul ul ul,
.mc_topnavigation li ul ul {
margin: -2.3em 0 0 13.5em;
}
/************ Start Vertical *******************/
.mc_vertical {
position: relative;
float: left;
width: 12em;
font-size: 12px;
z-index: 98;
}
.mc_vertical a, .mc_vertical a:visited, .mc_vertical a:link
.mc_vertical a:hover, .mc_vertical a.sfhover
{
margin-top: 2px;
padding: 2px 0 4px 0;
width: 12em;
}
.mc_vertical li {
float: left;
background-color: #F9EDCC;
width: 12em;
z-index: 998;
}
/* !!! Critical difference between topnavigation and vertical !!! */
/* for vertical menus, start expand right at top level menu's li */
.mc_vertical li ul {
position: absolute;
z-index: 997;
width: 13.5em;
left: -999em;
background-color: #F9EDCC;
border-left: 1px solid #F9EDCC;
border-right: 1px solid #F9EDCC;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #B33B3B;
margin: -2.4em 12px 0 12em;
padding: 2px 0 0 0;
}
/* Below is the key to displaying uls of sub-menus to right of its parent li */
ul.mc_vertical .current ul,
ul.mc_vertical ul li:hover ul,
ul.mc_vertical ul li.sfHover ul {
left: 0;
top: 2.4em; /* match top ul list item height */
}
}
.mc_left_pane li ul {
margin: -2.3em 0 0 13.5em;
}
.mc_right_pane li ul {
margin: 2.3em 0 0 999em; /* not implemented yet */
}
/************ 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 {
/* width: 13.5em; */
float: none;
text-transform: none;
}
/* test with this restored */
#mc_menu_1 li:hover ul {
left: auto;
display: block;
}
/*
#mc_menu_1 li ul {
position: absolute;
width: 13.5em;
left: -999em;
z-index: 99;
}
*/
#mc_menu_1, #mc_menu_1 ul {
list-style: none;
line-height: 1;
}
/*=-=-=-[End Navigation]-=-=-=*/
/*=-=-=-[Floats]-=-=-=*/
#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 ]-=-=-=*/
* 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: #F9EDCC; /* 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: 13.5em; /* 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 */
}