body, p, blockquote, textarea { 
	margin: 10px 20px 10px 20px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	} 

/* Styling the main menu
We need to style the main menu first. Also, we need to make sure 
that only the list items which are directly children of the main menu 
will be affected. In other words, we don't want to select our sub-menu 
and its items. For that reason, we'll use the child selector (>): */

#navigation {
	margin: 0;
	padding: 0 1em;
	background: #f60;
	color: #000;
	height: 3em;
 	list-style: none;
}

#navigation > li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
	padding: 0 1em;
}

#navigation > li > a {
	float: left;
	height: 100%;
	color: #000;
	text-decoration: none;
	line-height: 3;
	font-weight: bold;
	text-transform: uppercase;
}

#navigation > li > a:hover {
	color: white;
	text-decoration: underline;
}

/* Step 3: Creating a contextual positioning
Now we want our sub-menu to always appear under the list item it belongs to. For that reason, we create a contextual positioning on that item: */

#navigation > li.sub {
	position: relative;
}

/* Styling the sub-menu
To hide our sub-menu, we'll use negative absolute positioning. 
We cannot use display: none due to accessibility reasons.
top: -1000em hides our sub-menu from the view without affecting its display role. */

#navigation > li.sub ul {
 width: 10em;
 margin: 0;
 padding: 0.5em 0;
 list-style: none;
 background: #a40;
 position: absolute;
 top: -1000em;
}

#navigation > li.sub ul li {
 width: 90%;
 margin: 0 auto 0.3em auto;
}

#navigation > li.sub ul li a {
 height: 100%;
 display: block;
 padding: 0.4em;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
}

#navigation > li.sub ul li a:hover {
 background: #f60;
 text-decoration: underline;
}

/* Showing the sub-menu
To show our sub-menu, we have only to adjust its top property 
using the height of the list item as its value. In this case, such 
height is inherited from the main menu and is actually 3em. */

#navigation > li.sub:hover ul {
 top: 3em;
}