Submenu – hover dropdowns

Hey,

I’m trying to get the submenus on this website to show up when you hover over the main menu items (somebody else very kindly designed the site for us but only set it up with one level of menu). I’ve been playing around with it for ages, but I don’t fully understand it and I seem to be getting nowhere fast. Ideally I would like it to show a submenu underneath the current one, on hover, with some sort of background so that the submenu can be differentiated from the body of the site. It would also be good to have a a hover font colour too.

At the moment, where it says ‘About’ currently, it should also have a dropdown saying ‘Our Patron’ (with many more to be added once we have sorted this issue!).

This is the current code, which probably shows just how much I’ve been messing around with it and how little I know!! Any help would be hugely appreciated. Thanks!

div#menustrip{
	height: 60px;
	width: 100%;
	background: transparent url('../images/menu_unfilled_film.png') top center repeat-x;
}

div#menucentre{
	height: 60px;
	background: transparent url('../images/menu_filled_film.png') top center repeat-x;
	padding: 0px 25px;
	margin: 0px auto;
	z-index: 999;
}
div#menucentre ul{
	margin: 0px;
	height: 60px;
	list-style: none;
	font-family: Interstate, Impact, sans-serif;
}

div#menucentre ul li{
	padding: 0px;
	margin: 0px;
	text-align: center;
	display: inline;
	height: 60px;
	font-size: 30px;
	color: #E7F1E2;
	text-transform: uppercase;
}
div#menucentre ul li a{
	position: relative;
	top: 15px;
	padding: 10px 20px;
	margin: 0px;
	color: #E7F1E2;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: normal;
}
div#menucentre ul li a:hover, div#menucentre ul li a:active{
	color: #A3C1AD;
	text-shadow: #231f20 2px 2px 2px;
	text-decoration: none;
}

div#menucentre ul li ul{
	padding: 0px;
	margin: 0px;
	text-align: left;
	display: none;
	font-size: 30px;
	color: #000;
	text-transform: uppercase;
}

div#menucentre ul li ul a{
	position: relative;
	top: 15px;
	padding: 10px 20px;
	margin: 0px;
	color: #A3C1AD;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: normal;
}

div#menucentre ul li:hover .div#menucentre ul li ul{
	display: block;
	color: #000;
	background: #CCC;
	text-shadow: #231f20 2px 2px 2px;
	text-decoration: none;
}