Multi-level Navigation CSS editing

So my nav menu seems to be working correctly, but I want to make it look like the existing nav bar. I want the color, font, height, width, padding, margins, etc to be the same but for whatever reason I can’t seem to get it to work. I also want the actual drop down to appear 50px from the top of the screen so that it looks like the menu is growing out of the orange bar on the bottom of the page. Here’s a link to my site.

I’m also going to attach the CSS for the header where the nav bar is located if it helps. Hopefully someone can point me in the right direction.

/*////////// HEADER ///////////*/
#header {
	background-color: #038bff;
	background-image: url(images/bg-header.png);
	background-repeat: repeat-x;
	height: 226px;
	margin: 0;
	padding: 0;
	width: 100%;
	}

#banner {
	height: auto;
	margin: 0 auto;
	top: 50px;
	width: 900px;
	}

#navbar {
	background-image: url(images/bcsnavbar.png);
	height: 50px;
	margin: 0 auto;
	text-align: right;
	width: 900px;
	}

#navbar ul {
	list-style: none;
	margin: 0;
	padding-top: 9px;
	padding-right: 4px;
	}

#navbar li {
	display: inline;
	margin: 0 6px;
	}

#navbar li a {
	color: #464646;
	font-family: "Trebuchet MS", Geneva, Verdana, sans-serif, Arial, Georgia, Times New Roman, Times;
	font-size: 0.75em; /* 16x0.75=12px */
	text-decoration: none;
	}

#navbar li a:hover {
 	color: #000000;
	text-decoration: underline;
	}

#navlist li a#current {
	color: #7e7e7e;
	text-decoration: underline;
	}

#header h1 {
	margin: 0;
	padding: 0;
	}

#header h1 a {
	color: #fff;
	font-size: 17pt;
	text-decoration: none;
	}

#header h1 a:hover {
	color: #eee;
	text-decoration: none;
	}