CSS :Background color on hover State - html

Question

i am having left navigation in my web page See the attached pic to get better idea of what i have in design
as shown in pic i have 15px padding on both sides of navigation but problem is that when i hover over any of element in navigation its background color should be set to dark grey to the full width means 15 px padding on both sides must be eliminated on hover state and background color
i really cant get how to solve this problem on hover state i can add this
.nav > li > a:hover { background-color: #f18c2e;
}
but how do i show it full width background color as per given Pic ?

Answer 1

You can set the box-shadow to cover the left and right side (15px offset):
nav li:hover {
background:gray;
cursor:default;
box-shadow: 15px 0 0 gray, -15px 0 0 gray;
}
Demo.

Answer 2

Try something like this: http://jsbin.com/vebopu/2/
Considering the following CSS:
/* Your 15px padding */
.nav > li {
padding: 15px;
}
/* Where you set the initial stuff */
.nav > li > a {
background-color: #111;
color: #fff;
display:inline-block;
}
/* You want to remove the padding on li hover */
.nav > li:hover {
padding: 0;
}
/* But you still want the resulting size to keep the padding */
.nav > li:hover a {
background-color: #f00;
padding: 15px;
}