Title: Menu Hover
Last modified: August 21, 2016

---

# Menu Hover

 *  [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/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;
       ```
   

The topic ‘Menu Hover’ is closed to new replies.

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [mouse-hover](https://wordpress.org/support/topic-tag/mouse-hover/)

 * 0 replies
 * 1 participant
 * Last reply from: [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/menu-hover/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics