CSS：悬停状态下的背景颜色

Question

我在我的网页上留下导航请参阅随附的图片，以便更好地了解我的设计内容

如图所示我在导航的两侧都有15px填充但问题是当我将鼠标悬停在导航中的任何元素上时，其背景颜色应设置为深灰色至全宽意味着两侧必须填充15 px在悬停状态和背景颜色时被消除

我真的无法在悬停状态下解决这个问题，我可以添加这个

.nav > li > a:hover { background-color: #f18c2e;
  }

但是如何根据给定的Pic显示全宽背景颜色？

Answer 1

您可以将box-shadow设置为覆盖左侧和右侧（15px偏移）：

nav li:hover {
  background:gray;
  cursor:default;
  box-shadow: 15px 0 0 gray, -15px 0 0 gray;
}

Demo.

Answer 2

尝试这样的事情：http://jsbin.com/vebopu/2/

考虑以下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;
}