MENU BAR

Menu Bar

/* The Menu Bar - for most skins, this is where the background bar color is set */
#megaMenu{
	background:black;
}

Link (A) & Anchor Emulators (SPAN)

Top Level

/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
  font-size: 12px;
  color: #d9d9d9;
  padding: 12px 15px;
  font-weight: bold;
}

Top Level - Hover

/* Top Level Items - Hover */
#megaMenu ul.megaMenu > li.menu-item:hover > a,
#megaMenu ul.megaMenu > li.menu-item > a:hover,
#megaMenu ul.megaMenu > li.menu-item.megaHover > a,
#megaMenu ul.megaMenu > li.menu-item:hover > span.um-anchoremulator,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator:hover,
#megaMenu ul.megaMenu > li.menu-item.megaHover > span.um-anchoremulator {
  color: #ffffff;
  border-bottom-color: transparent !important;
  background-color: #000000;
}

Top Level - Current

/* Top Level Items - Current Item */
#megaMenu ul.megaMenu > li.menu-item.current-menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item.current-menu-parent > a, 
#megaMenu ul.megaMenu > li.menu-item.current-menu-ancestor > a {
  color: #ffffff;
}

Second Level

/* Sub Menu Headers */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item:hover > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item.ss-nav-menu-header > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu li.menu-item.ss-nav-menu-header > span.um-anchoremulator,
#megaMenu ul.megaMenu .wpmega-widgetarea h2.widgettitle {
  color: #777777;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #ffffff;
  padding-bottom: .4em;
  border-bottom: 1px dotted #e9e9e9;
  margin-bottom: 0.6em;
}

Second Level Links - Hover

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item > a:hover,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item:hover > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a:hover{
  color:red;
}

Third Level Link

/* Sub Menu Links & Fake Links */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu ul.sub-menu-2 li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu ul.sub-menu-2 li.menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu ul.sub-menu ul.sub-menu-2 li.menu-item > a,
#megaMenu ul.megaMenu ul.sub-menu ul.sub-menu-2 li.menu-item > span.um-anchoremulator {
  color: #888888;
  font-size: 12px;
  text-shadow: 0px 1px 1px #ffffff;
  background-color: transparent;
}

Third Level Link Hover

/* Sub Menu Link Hover */
#megaMenu ul.megaMenu li.ss-nav-menu-mega ul.sub-menu ul.sub-menu-2 li.menu-item a:hover, 
#megaMenu ul.megaMenu ul.sub-menu ul.sub-menu-2 > li.menu-item:hover > a {
  color: #000000;
  background-color: transparent;
}

Highlight Color

/* Highlight color */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator {
  color: #4d90fe !important;
}

Menu Item (LI) - Mega

List items are mostly structural.

Top Level

/* Top Level Menu Items - Under normal circumstances you should NOT style these */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega {
  
}

Second Level

/* Sub Menu Columns */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1 > li {
  min-width: 120px;
}

Third Level

						
/* Third Level Menu Items - Under normal circumstances you should NOT style these */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul ul.sub-menu li {
  
}

Inner Menu Bar & Submenus

Inner Menu Bar

/* Inner Menu Bar (UL) - This can be useful for positioning the menu items within the menu bar */
#megaMenu ul.megaMenu{
	width:960px;
	margin:0 auto;	
}

Submenu (UL) - Mega

/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
  border-color: #e0e0e0;
  color: #888888;
  text-shadow: 0px 1px 1px #ffffff;
  -webkit-box-shadow: 1px 1px 1px #dddddd;
  -moz-box-shadow: 1px 1px 1px #dddddd;
  box-shadow: 1px 1px 1px #dddddd;
  background-color: #f9f9f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fefefe));
  background: -webkit-linear-gradient(top, #f9f9f9, #fefefe);
  background: -moz-linear-gradient(top, #f9f9f9, #fefefe);
  background: -ms-linear-gradient(top, #f9f9f9, #fefefe);
  background: -o-linear-gradient(top, #f9f9f9, #fefefe);
}
/* Add this selector to style flyouts the same way:
   #megaMenu ul.megaMenu li.ss-nav-menu-reg ul.sub-menu */


#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

Third Level Lists (UL) - Mega

/* Third level submenu - under normal circumstances, you should NOT style these */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega ul.sub-menu-1 ul.sub-menu{
	
}

Menu Item (A) - Flyout

Second Level & below

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item span.um-anchoremulator{
	color:green;
}

Second Level & below - hover

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item a:hover, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item:hover a{
	color:blue;
}

Third Level & below

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu li.menu-item a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu li.menu-item span.um-anchoremulator{
	color:purple;
}

Third Level & below - hover

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu li.menu-item a:hover, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu li.menu-item:hover a{
	color:blue;
}

Menu Item (LI) - Flyout

List items are mostly structural.

Second Level

/* Second Level Menu Items - Under normal circumstances you should NOT style these */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li{
	
}

Third Level

/* Third Level Menu Items - Under normal circumstances you should NOT style these */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu li{
	
}

Submenu (UL) - Flyout

Second Level & below

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu {
  border-color: #e0e0e0;
  color: #888888;
  text-shadow: 0px 1px 1px #ffffff;
  -webkit-box-shadow: 1px 1px 1px #dddddd;
  -moz-box-shadow: 1px 1px 1px #dddddd;
  box-shadow: 1px 1px 1px #dddddd;
  background-color: #f9f9f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fefefe));
  background: -webkit-linear-gradient(top, #f9f9f9, #fefefe);
  background: -moz-linear-gradient(top, #f9f9f9, #fefefe);
  background: -ms-linear-gradient(top, #f9f9f9, #fefefe);
  background: -o-linear-gradient(top, #f9f9f9, #fefefe);
}

Third Level & Below

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu ul.sub-menu{
  border-color: #e0e0e0;
  color: #888888;
  text-shadow: 0px 1px 1px #ffffff;
  -webkit-box-shadow: 1px 1px 1px #dddddd;
  -moz-box-shadow: 1px 1px 1px #dddddd;
  box-shadow: 1px 1px 1px #dddddd;
  background-color: #f9f9f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fefefe));
  background: -webkit-linear-gradient(top, #f9f9f9, #fefefe);
  background: -moz-linear-gradient(top, #f9f9f9, #fefefe);
  background: -ms-linear-gradient(top, #f9f9f9, #fefefe);
  background: -o-linear-gradient(top, #f9f9f9, #fefefe);
}

Widgets and Content Overrides

Widget Menu Item (LI) 

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.ss-sidebar{
	
}

Widget Area (UL)

#megaMenu ul.megaMenu ul.sub-menu .wpmega-nonlink.wpmega-widgetarea > ul{
	
}

Widget (LI)

#megaMenu ul.megaMenu ul.sub-menu .wpmega-nonlink.wpmega-widgetarea > ul li.widget{
	
}

Content Override (LI)

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item.ss-nav-menu-item-depth-1.ss-override{
	
}