/* -------------  Mechanism to hide and show child menus -------------------------*/
/*
    This CSS menu is made possible by the dynamic pseudo class ':hover'. A dynamic pseudo class
    works sort of like an event in that we can assign styles to elements dynamically based on
    an action a user is taking (hovering)

    The second part of CSS that supports menus is the child selector '>'. In combination with 
    ':hover' this allows us to change the style of a child element when it's parent  is
    hovered over, i.e. We can make a child menu visible when you hover over the parent menu item.
*/
nav li{
	background-color: #990088;
  border-top :      solid #7c0098 2px;
  border-left :     solid #7c0098 2px; 
  border-right :    solid #550068 2px;
  border-bottom :   solid #550068 2px;
  
}
/*
  ul ul will be the child menus - start with these hidden
*/
nav ul ul {
	display: none;
}

/*
  When you hover over a parent menu item - show the child menu

  Use the CSS dynamic pseudo class ':hover'  and the child selector '>' 
*/
nav ul li:hover > ul {
	display: block;
}
/* ----------------------- Top level menu styling ----------------------------------*/
nav ul {
	padding: 0 0 0 0;
	list-style: none;
	position: relative;
}

/*
  Insert a blank block element after the top level <ul>(s), clear floats on this element.
  I'm not sure but I think this is here to prevent interactions with other elements
*/
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

/* Make the parent level menu horizontal with 5 items in a row*/
nav ul li {
	float: left;
  width: 19.4%;
}

/* Change the background of the parent and child menus to show which is selected */
nav ul li:hover {
	background: #4b545f;
}

nav ul li:hover a {
	background: #4b545f;
}

nav ul li:hover > ul a {
	background: #67007e;
}

nav ul li a {
	display: block; 
	padding: 5px 5px;
	color: #FFF; 
	text-decoration: none;
	font-size: 12pt;
}
		
/* ----------------------- Sub menus ------------------------------*/

/* Make the submenu item the same width as the menu title*/
nav ul ul {
	background: #5f0075; 
	border-radius: 0px; 
	padding: 0;
	position: absolute;
	width: 19.4%; 
}

nav ul ul li {
	float: none; 
	background-color: #990088;
	border-top: 1px solid #6b007c;
	border-bottom: 1px solid #57006a; 
	position: relative;
	width: 100%;
	z-index: 1111;
}

nav ul ul li a {
	padding: 5px 5px;
	color: #fff;
}	

nav ul ul li a:hover {
	background: #4b545f;
}