CSSリスト項目のホバーがul

Question

内のすべてのリスト項目に影響しているようです。メニュー項目に問題があります。 私はリストアイテムの上にマウスを置くたびに、ホバリングされたアイテムを暗くしているので、メニューアイテムはスタイリングされています。
しかし、1つのリスト項目にカーソルを置くと、それはすべてのリスト項目に影響を及ぼしているようです。

問題を絞りました。これは、私のメニューバーコンテナdivが相対的に配置されているとき、完璧に動作します。しかし、私はこのメニューバーコンテナdivを修正します。

誰でも問題があるようですか？事前にヘルプを評価してください。 "高さ：30px"

#menu-bar-container { 
    background: url(images/hp/header-bg.png); 
    min-width: 100%; 
    height: 110px; 
    margin: 0 auto; 
    text-align: center; 
    border-bottom: 1px solid #2F2F2F; 
    position: fixed; 
    z-index: 10; 
} 

#menu-bar-2 { 
    display: inline-block; 
    margin: 0 auto; 
    height: 32px; 
    max-width: 100%; 
} 

#menu-bar-2 ul { 
    list-style-type: none; 
    overflow: auto; 
    margin: 0; 
    padding: 0; 
    padding-top: 4px; 
    height: 30px; 
} 

#menu-bar-2 li { 
    float:left; 
} 

#menu-bar-2 li a { 
    display: block; 
    text-decoration: none; 
    padding: 0px 10px; 
    font-size: 15px; 
    top: 10px; 
    color: white; 
} 

#menu-bar-2 li.active a { 
    color:#E20000; 
} 


.fade { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
    opacity: .7; 
} 

Answer 1

変更あなたの＃メニューバーの容器の高さ112pxに、 および削除：ここ

はHTMLです：

<div id="menu-bar-container"> 

    <h1> GENE WONG OFFICIAL PAGE </h1> 

    <div class="clear"> </div> 

     <div id="menu-bar-2"> 
      <ul> 
       <li class="fade"><a href="index.html">HOME</a></li> 
       <li class="fade"><a href="index.html">NEWS</a></li> 
       <li class="fade"><a href="bio.html">BIOGRAPHY</a></li> 
       <li class="fade"><a href="index.html">MEDIA</a></li> 
       <li class="fade"><a href="index.html">PROJECTS</a></li> 
       <li class="fade active"><a href="gear.html">GEAR</a></li> 
       <li class="fade"><a href="index.html">CONTACT</a></li> 
      </ul> 
     </div> 
    </div> 

、ここでCSSです＃からmenu-bar-2 ul、 これで問題はありません。