Html CSS：悬停状态的背景色

我已经离开了我的网页导航看到附加的图片，以更好地了解我的设计有什么想法

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

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

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

但是如何根据给定的图片显示全幅背景色呢？

试试下面的方法：

考虑到以下几点：

/* 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;
}

---

您可以将

框阴影设置为覆盖左右两侧（15px偏移）：

当填充应用于其父容器时，它不起作用
nav li:hover {
  background:gray;
  cursor:default;
  box-shadow: 15px 0 0 gray, -15px 0 0 gray;
}