html - 更改所选 li 元素的背景颜色

Question

我创建了一个带有列表的导航，在当前页面上为列表项提供了 .selected 类。我正在尝试为此类工作添加背景颜色，但我无法让它填充整个 li 元素。它不会在 navs selected li 元素的左侧添加任何背景颜色。不确定这是否有意义？

这是我的 html:

<nav>
    <ul>
        <li class="selected"><a href="index.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Themes</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

这是CSS:

nav li {
  border-right: solid 1px #fbfbfb;
  display: inline;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  list-style: none;
  margin-left: 15px;
  padding: 22px 15px 22px 0;
  text-transform: uppercase;
  text-align: center;
}

nav ul {
  border-top: solid 1px #fbfbfb;
  border-left: solid 1px #fbfbfb;
  margin-bottom: 0;
  padding: 20px 0;
}

nav a {
  color: #6e6e6e;
  text-decoration: none;
}

nav a:hover {
  border-bottom: 1px solid #2ecc71;
}

.selected {
  background-color: #2ecc71;

}

Answer 1

只需在 li 的左侧填充一些 -

padding: 22px 15px 22px 15px;

这是 jsFiddle