Css 背景色不'；悬停不显示

我正在做一个新的响应性设计，我的菜单有一个问题，我想不出来。基本上，我希望当你把鼠标悬停在菜单项上时，它的背景变成白色，文本变成蓝色。现在，文本变为蓝色，但背景不会变为白色

HTML代码：

<div class="header">
  <div class="header_content">
    <div class="logo">
      <img src="images/new_logo.png" class="hdr_logo">
    </div>
    <div class="main_menu">
      <ul>
        <li>ABOUT US</li>
        <li>OPERATIONS BRANCH</li>
        <li>LOGISTICS BRANCH</li>
        <li style="border-right:0;">COMMUNITY</li>
      </ul>
    </div>
  </div>
</div>

编辑：问题已解决

---

浮动li不是块元素，因此无法更改其背景色。我一添加

显示：块对于li，它解决了这个问题。
对我来说似乎很好：

我将颜色改为红色以进行说明。
出于好奇，您使用十六进制格式和rgb格式混合的颜色代码有什么原因吗？因为这是一个导航，请尝试在列表项中添加链接，并在CSS中而不是在li中选择它们：
。主菜单a:悬停{…}
  .header {
    background: url('images/header2.png') repeat-x top left;
    width: 100%;
    height: 150px;
    color: #FFF;
    margin: 0;
    padding: 0;
  }

  .header_content {
    width: 960px;
    margin: 0 auto;
    height: 150px;
    padding: 0; 
  }

  .logo {
    float:left;
    width:120px;
  }

  .main_menu {
    float:left;
    height: 30px;
    margin-top: 120px;
    line-height: 30px;
    padding: 0;
    width: 830px;
  }

  .main_menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
    overflow: hidden;
    height: 30px;
  }

  .main_menu li {
    float: left;
    border-right: 1px solid #FFF;
    text-align: center;
    padding: 0;
    margin: 0;
    padding-left: 2%;
    padding-right: 2%;
    overflow: hidden;
    height: 30px;
    cursor: pointer;
  }

  .main_menu li:hover {
    background-image: none;
    background-color: #FFF;
    color: rgb(33,47,57);
  }

.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}