@charset "UTF-8";

/* Drop Down Menu
Create a basic unordered list 
for sub menu, add a sub list
and for 3rd tier, another sub list.

Wrap your menu in a div and apply class='menu'

Modify this CSS to match your style and layout */

/* applied to the div holding the menu */
.menu {
	position: absolute; /* this is assuming the parent container is set to position: relative*/
	width: 960px; /*adjust for your page width or menu width */
	z-index: 1;
	bottom: 0px; /*adjust for your page */
	left: 0px;  /*adjust for your page */
	background-color: #92806d; /*adjust color for your page */
}
/* the whole menu look */
.menu ul {
	padding: 0px;
	list-style: none;
	position: relative;
	display: table; /* might have to change this setting - inline-table */
	text-align: center;
	background-color: none; /*adjust color for your page */
}
.menu ul:after {
	content: ""; clear: both; display: block;
}

/*Hide child lists by default*/
.menu ul ul {
	display: none;
	position: absolute;
	top: 100%;
}

/*display on hover*/
.menu ul li:hover > ul {
	display: block;
}

/*Floating the main list left*/
.menu ul li {
	float: left;
	background-color: none; /*adjust color for your page, no color because see thrugh to menu div color */
	border-left: 1px solid #FFFFFF; /* border between links */
    
}
/* menu over state */
.menu ul li:hover > a {
	color: #ffffff;
	background: #435c7a;
}

/* top level links */
.menu ul li a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	width: 96px;
	
	
}
/* sub menu links, background color */
.menu ul li:hover > ul {
	display: block;
	background: #92806d; 
	padding: 0;
}

/* no border on the ends of menu, can add rounded corners - make background color in .menu none */
.menu ul li:first-child {
	border-left: none;
	border-top-left-radius: 20px;	
}
.menu ul li:last-child { 
	border-right: none; 
	border-top-right-radius: 20px;	
}

/* sub menu, second tier */
.menu ul ul li a {
	color:#fff;
	background: #92806d; 
	font-size: .85em;
}
/* sub menu, second tier */
.menu ul ul li {
	float: none;
	border-top: 1px solid #E6E6E6;
	border-left: none;
	border-right: none;
	position: relative;
	text-align: left;
}

/* sub sub menu, 3rd tier */
.menu ul ul ul {
	position: absolute; 
	left: 100%; 
	top: 0;
}

/* sub menu links width */
.menu ul ul li a {
	width: 16em;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
}

.menu ul li:hover > ul {
	display: block;
	background: #ffffff; 
	padding: 0;
	
}