CSS悬停在列表项上似乎影响了ul中的所有列表项

Question

我的菜单项有问题。 我将菜单项设置为样式，因此每当我将鼠标悬停在列表项上时，它都会使悬停的项目变暗 但是，每当我将鼠标悬停在一个列表项上时，它似乎都会影响和调暗所有列表项。

我缩小了问题范围。当我的菜单栏容器div相对定位时，它工作得很好。但是，我想要修复这个菜单栏容器div。

任何人都知道这似乎是什么问题？提前感谢帮助。

这是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-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;
}