Menu Hover

I am new to WP and relatively new to CSS, so please be patient with me…

I have a basic menu using the twenty-twelve theme, where I’ve changed the background and font colour, so far so good.

On mouse over of the menu items, I’ve adjusted the mouse hover (.main-navigation li a:hover) so the background colour changes, but my problem is I want the background colour on mouse over to be the same size as my button area, inclusive of padding, but it only matches the text width and I can’t figure out how to change the CSS to fix this. There is padding to seperate the buttons (.main-navigation li), but adding the same padding to the mouse hover, doesn’t work.

I’d be grateful for any help as to which is the correct css to edit to achieve this.

This is the css…

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #00AAA6;
		border-top: 1px solid #00AAA6;
		display: inline-block !important;
		text-align: center;
		background: #00AAA6;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
		text-align: center;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #FFF;
		line-height: 2.692307692;
		text-transform: capitalize;
		font-size: 12px;
		font-size: 1rem;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		/*margin: 0 0 0 0;*/
		color: #FFF;
		background: #009999;
		transition: color 0.25s ease 0s, background-color 0.25s ease 0s;
	}
	.main-navigation li {
		margin: 0 0 0 0;
		/*margin: 0 2.857142857rem 0 0;*/
		position: relative;
		border-left: 1px solid #89dcdb;
		padding: 0px 10px 0px 10px;
	}
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 1rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover {
		background: #efefef;
		color: #FFF;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #FFF;
	}
	.menu-toggle {
		display: none;