﻿/*
===========================================================
 Presentation CSS for modifying the appearance of the menu
===========================================================
*/

/*
===========================================================
 ID MainMenu
===========================================================
*/

/* root-level menu */
ul#MainMenu {
}

/* all submenus */
/* Typically set borders, background colors here. */
ul#MainMenu .sub {
}

/* all menu items */
/* Typically set menu item borders here. */
ul#MainMenu li {
}

/* nested menu items */
ul#MainMenu .sub li {
}

/* menu item links */
/* Typically set padding, colors, text attributes here. */
/* Also must set background color and opacity here or in nested links to get translucent effect */
ul#MainMenu a {
}

/* nested menu item links */
ul#MainMenu .sub a {
}

/* hovered menu item links */
ul#MainMenu a:hover,
ul#MainMenu.root .breadcrumb:hover {
}

/* hovered nested menu item links */
ul#MainMenu .sub a:hover {
}

/* Applied to the submenu list immediately under the menu item hovered over */
/* Second-level menu lists only */
ul#MainMenu li:hover ul, 
ul#MainMenu li.hover ul {
	width: 180px; /* width of submenu, must be set so third-level list can get shifted over properly */
}

/* Applied to the submenu list immediately under the menu item hovered over */
/* Add more rules here if your menus have more than three (4) tiers */
ul#MainMenu .sub li:hover ul, 
ul#MainMenu .sub li.hover ul {
	left: 180px; /* position, based on width of parent submenu */
	top: 0;
}

ul#MainMenu .branch {
}

ul#MainMenu.root .breadcrumb {
}

ul#MainMenu.root .current,
ul#MainMenu .sub .current {
}
