#navBar1 {
	float: left;
	background-color: #828b80;
	border: solid 2px #849c92;
	border-radius: 13px;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	background: -moz-linear-gradient(bottom,#596a63, #929a90);
	background: -webkit-gradient(linear,left bottom, left top, from(#596a63), to(#929a90));
	-moz-box-shadow: 2px 5px 7px #161617;
	-webkit-box-shadow: 2px 5px 7px #161617;
	box-shadow: 2px 5px 7px #161617;
}
/*
Lets look at the border radius first, which gives us the rounded corners. 
First of all, the border-radius, moz-border-radius & -webkit-border-radius all do the same thing but for different browsers. 

Moz is for Firefox & webkit is for safari and chrome, although i think the standard border-radius may work for newer versions. 
As you can see the code is straight forward, simply specify a value. In this case we are using 13px.
 
Now we need to add the gradient. 
		We do this by using the usual background property, but with a slightly different value.
 
For firefox(moz): 
		We need to specify where the gradient starts & the two colours we wish to use.
 
Webkit browsers: Slightly more difficult. 
		Specify the type of gradient, where it starts, where it ends, the first color in from() & the second color in to().
 
Finally we can add a shadow to our menu using the new box-shadow property. 
As far as I am aware this only works in Safari & firefox currently. 
The box shadow property accepts 4 values. 
		The first is the horizontal offset, 
		the second is the vertical offset, 
		the third is the blur radius & it also accepts a color.
*/
#navBar1 ul ul {
	display: none;
}
#navBar1 ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
/* Get rid of any margin/padding & set list style to none.
		Change position to relative, this is IMPORTANT! 
		Why? Because we will be using absolute positioning to move the nested ULs into position.
	Remember, absolute positioning means the element is positioned relative to the first relatively positioned parent element.
*/
#navBar1 ul li {
	display: block;
	float: left;
	padding-top: 9px;
	padding-bottom: 9px;
}
#navBar1 ul li span a {
	border-left: solid #8cab9e thin;
}
/* Change display mode to block & float each list item to the left. 
 	Add enough padding to the top & bottom so that the text is centered.
	Add the first border to any anchor elements which are nested inside span elements.
*/
.headerList1 a {
	border-right: solid #af98b5 thin;
}
#navBar1 ul li a {
	display: block;
	padding: 4px;
	padding-left: 13px;
	padding-right: 13px;
	color: #9FBF92;
	font-weight: bold;
	text-decoration: none;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 90%;
}
/* Change the position to absolute & using the top property move the UL down 42px. 
	Apply the background image, add a border, change the font size and specify the width.
	Leave display set to none, this way the drop down section is out of sight.
*/
#navBar1 ul li a:hover {
	color: #849c92;
	text-decoration: underline;
}
#navBar1 ul ul {
	position:absolute;
	top: 42px;
	background-color: #dfdfdf;
	background: url(_img/graphic/menuDropBG.png);
	width: 400px;
	border: thin solid #849c84;
	font-size: 80%;
	display:none;
	text-align:center;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 2px 5px 7px #161617;
}
#navBar1 ul li:hover ul {
	position: absolute;
	left: 60px;
	display: block;
}
/* Move the nested UL 60px to the right, this positions it nicely. 
	Change the display mode to block. 
	Now, whenever the mouse hovers over a particular list item, the nested UL becomes visible.
 */
#navBar1 ul ul li {
	padding: 0;
	padding-top: 3px;
	padding-bottom: 2px;
}
#navBar1 ul ul li a {
	border: none;
	color: #9FBF92;
}