menu.css

/* set some default / browser reset values */

body {
	font-family: arial;
	font-size: 12px;
}

ul, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/* set the whole menu to float left so it properly contains its children */
.menu {
	float: left;
}

/* layout for the initial, top menu */
.menu > li {
	float: left;
	padding: 10px 20px;
	background-color: #292961;
	color: #ffffff;
	text-align: center;
	border-right: 1px solid #4152AD;
	font-weight: bold;
}

/* no border for last menu item */
.menu > li:last-child {
	border-right: none;
}

/* hover state for top menu */
.menu > li:hover {
	background-color: #E1EEF8;
	color: #333333;
	cursor: pointer; /* this makes the mouse cursor look like a hand when we hover! */
}

/* style the dropdown, nested lists
   and hide them offscreen until needed
*/
.menu ul {
	position: absolute;
	left: -9999px;
	text-align: left;
	background: #E1EEF8;
	margin-top: 10px; /* this needs to match the padding-bottom of the parent <li> */
	padding: 10px;
}

/* the magic part! restores offscreen submenu */
.menu > li:hover ul {
	left: 0;
}

/* gives our submenu items some bullet points */
.menu ul li {
	list-style-type: square;
	margin-left: 10px;
	white-space: nowrap;
}

/* forces the submenu items to appear relative to their parent */
.menu li {
	position: relative;
}

/* styles the links in the submenu */
.menu ul a {
	padding: 5px 10px;
	display: block;
	font-weight: bold;
	color: #B45656;
}

/* hover state for submenu links */
.menu ul a:hover {
	background: #B65656;
	color: #ffffff;
	text-decoration: none;
}