Question

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

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，它就解决了这个问题。

Answer 1

似乎对我很好：http://jsfiddle.net/s3JT9/

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

我把颜色改成红色来说明。

悬停时不显示背景颜色

1 个答案: