html - 悬停属性无法正常工作

Question

我不确定我做错了什么，但是悬停没有按我想要的方式工作。如您所见，将光标放在任何菜单上时，其背景看起来很奇怪。我不想复制任何东西，但我的意图是做与 http://www.nfl.com/ 上相同的事情。只要将光标放在任何菜单上，就会激活全背景蓝色，并且颜色名称会更改为白色。最后，每个菜单后都有竖线。我不知道该怎么做

http://i.stack.imgur.com/OYDn5.png

.nav {
width: 1000px;
height: 35px;
background: #2F2929; 
position: relative;
top: -13px;
}

.nav ul {
list-style: none;
padding-left: 0;
text-align: center;
word-spacing: 20px;
}

.nav ul li {
display: inline-block;
padding-top: 9px;
}

.nav ul li:hover {
background: #585454;
}

.nav ul li a {
text-decoration: none;
color: white;
font-size: 14px;
font-family: "Georgia", serif;
text-transform: uppercase;
}

Answer 1

试一试。

.nav {
width: 1000px;
height: 35px;
background: #2F2929; 
position: relative;
top: -13px;
}

.nav ul {
list-style: none;
padding-left: 0;
text-align: center;
word-spacing: 20px;
}

.nav ul li {
display: inline-block;
padding-top: 9px;
}


.nav ul li a {
display:inline-block;
text-decoration: none;
color: white;
font-size: 14px;
font-family: "Georgia", serif;
text-transform: uppercase;
}

.nav ul li a:hover {
background: #585454;
color: red;
}

<nav class="nav">
   <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
   </ul>
</nav>