Styling Drop Down Menu

I inherited a website designed using Twentytwelve as the base. I’m trying to style the drop down menu, but my code isn’t working. I’m trying particularly to do the following:

Fix dropdown on Home page so that it drops OVER the copy set in the header.
Change background color of dropdown menu
Change weight of font for dropdown menu text
Change color of font for dropdown hover text

Here is the website: http://www.vetovation.com

Here is the Nav code I’m working with in the CSS file:

/* Navigation Menu */

.small-navigation{text-align: center;}

.small-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143; display: inline-block; float: left; margin-left: 24px;

}

.small-navigation a {
	color: #444; text-decoration: none; 

}
.small-navigation a:hover {
	color: #444;
}

.small-navigation  {
	display: inline-block; float: left; margin-left: 48px;
}

.small-navigation  {
	display: inline-block; float: left; margin-left: 24px;
}

#headright{ float: right;}

.menu-main-menu-container{ float: right;}

.main-navigation {

	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;

}
.main-navigation li ul li a {
	background: none repeat scroll 0 0 #666666;
	border-top: 1px solid #686868;
	border-bottom: 1px solid #686868;
	text-align: center;
	color: #184d7a;

}
.main-navigation li ul li a:hover {
	background: none repeat scroll 0 0 #686868;
	text-align: center;
	color: #184d7a;

}
.main-navigation a {
	color: #fff; 

}
.main-navigation a:hover {
	color: #fff;
}

.main-navigation  {
	display: inline-block; float: left; margin-left: 12px;

}

Many thanks.