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 に答える