Firefox沒有閱讀嵌套元素的背景

Question

我遇到了一個Firefox的奇怪問題，我創建的菜單最多有三個級別，並且一切工作都正常，但在Firefox中點擊'First Level Menu'後，用兩個元素打開一個ul，當我點擊'Second Level Menu'時，突然從這個元素（灰色）的背景顏色消失，並且它是深灰色的。

CSS：

<li class="expand"> 
       <a href="#">First Level Menu</a> 
       <ul> 
        <li class="expand"> 
         <a href="#">Second Level Menu</a> 
         <ul> 
          <li> 
           <a href="page3.html">Third Level Menu</a> 
          </li> 
          <li> 
           <a href="bla.html">Another Third Level Menu</a> 
          </li> 
         </ul> 
        </li> 
        <li class="expand"> 
         <a href="#">Another Second Level Menu</a> 
         <ul> 
          <li> 
           <a href="bla.html">Third Level Menu</a> 
          </li> 
          <li> 
           <a href="bla.html">Another Third Level Menu</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 

你可以看到它在這裏http://jsfiddle.net/qWLTS/

有人可以幫助：

它發生在哪裏

.leftpanel 
{ 
    width: 230px; 
    float: left; 
    background-color: #282828; 
} 

.leftpanel>ul 
{ 
    padding-top: 10px; 
} 
.leftpanel li 
{ 
    width: 230px; 
} 

.leftpanel li>a 
{ 
    display: block; 
} 
.leftpanel ul a 
{ 
    color: #999; 
    padding: 10px 20px; 
    font-size: 13px; 
} 
.leftpanel ul a span { margin-right: 10px; } 
.leftpanel ul > li > a { border: 0; border-bottom: 1px solid #232323; } 
.leftpanel ul > li > a:hover, 
.leftpanel ul > li > a:focus { background-color: #2c2c2c; color: #fff; border-bottom-color: #232323; } 
.leftpanel ul > li { margin-bottom: 0; } 


.leftpanel ul > li.expand ul { background: #eee; } 
.leftpanel ul > li.expand > a { 
    background-image: url(../images/droparrow.png); background-repeat: no-repeat; background-position: right 19px; } 

.leftpanel ul .expand ul li a { 
    display: block; font-size: 13px; padding: 7px 10px 7px 30px; color: #333; 
} 
.leftpanel ul .expand ul li a:hover { text-decoration: none; background-color: #fff; color: black; border-bottom: 1px solid black;} 
.leftpanel ul .expand ul ul li { border-right: 0; } 
.leftpanel ul .expand ul ul li a { padding-left: 40px;} 

.leftpanel ul > li.active > a { background-color: #5c0154 ; color: #fff; } 
.leftpanel ul > li.active > a:hover { background-color: #5c0154; } 
.leftpanel ul .expand ul li.active a { background-color: #972f8e; color: white; } 

HTML部分？這讓我很生氣..

Answer 1

我從你的CSS中刪除了這兩行，並且所有的FF都正常工作，雖然沒有在Chrome上測試。

.leftpanel ul > li > a:hover, 
.leftpanel ul > li > a:focus { background-color: #2c2c2c; color: #fff; border-bottom-color: #232323; }