0

我正在开发一种新的响应式设计，但我的菜单出现了我无法弄清楚的问题。基本上，当您将鼠标悬停在菜单项上时，我希望菜单项的背景变为白色，文本变为蓝色。现在，文本变为蓝色，但背景不会变为白色。

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>

CSS：

  .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);
  }

编辑：问题已解决

浮动的 li 不是块元素，因此您无法更改它的背景颜色。一旦我添加display:block;到 li ，它就解决了这个问题。

4

1 回答 1

0

对我来说似乎工作正常：http: //jsfiddle.net/s3JT9/

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

我将颜色更改为红色以进行说明。

于 2013-02-05T18:21:46.083 回答