2014-01-29 87 views
0

我有一個垂直彈出式導航。通過在父母li:hover;上將其不透明度從0設置爲1來顯示第二級ul塊。這在IE和其他程序中工作正常,但在FF中,轉換效果不起作用。CSS3垂直彈出式菜單+轉換在FF中不起作用

的HTML標記:從CSS

<nav> 
    <ul> 
    <li> 
     <a title="" href="">Item</a> 
    </li> 
    <li> 
     <a title="" href="">Item</a> 
     <ul> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
     </ul>     
    </li> 
    <li> 
     <a title="" href="">Item</a> 
     <ul> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
      <li> 
       <a title="" href="">Item</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a title="" href="">Item</a> 
    </li> 
    </ul> 
</nav> 

部分:

 

    nav a{ 
     display: block; 
    } 
    nav a:hover, 
    nav li.selected > a{ 
     color: #00fa30; 
    } 
    nav li:hover > a, 
    nav li.selected > a{ 
     color: #00fa30; 
    } 
    nav ul{ 
     padding: 0px; 
     margin: 0px; 
     list-style-type: none; 
    } 

    nav > ul{ 
     border-bottom: 2px solid #006666; 
     font-size: 16px; 
     letter-spacing: 1px; 
     width: 212px; 
    } 
    nav > ul > li{ 
     border-top: 2px solid #006666; 
     padding: 6px 0px; 
     line-height: 19px; 
     text-transform: uppercase; 
    } 
    nav > ul > li:hover{ 
     position: relative; 
     z-index: 998; 
    } 

    nav > ul > li > ul{ 
     position: absolute; 
     top: -2px; 
     left: 212px; 
     z-index: 999; 
     opacity: 0; 
     border: 2px solid #006666; 
     padding: 0px 6px; 
     background-color: #eae9e7; 
     font-size: 16px; 
     letter-spacing: 1px; 
     width: 180px; 
    } 
    nav > ul > li:hover ul{ 
     opacity: 1; 
     -webkit-transition: opacity 0.6s ease-in; 
     -moz-transition: opacity 0.6s ease-in; 
     -o-transition: opacity 0.6s ease-in; 
     -ms-transition: opacity 0.6s ease-in; 
     transition: opacity 0.6s ease-in;   
    } 
    nav > ul > li > ul > li{ 
     border-bottom: 2px solid #006666; 
     padding: 6px 0px; 
     line-height: 0px; 
     text-transform: uppercase; 
    } 
    nav > ul > li:hover > ul > li{ 
     line-height: 19px;  
    } 
    nav > ul > li > ul > li:last-child{ 
     border-bottom: 0px; 
    } 

DEMO

+0

我剛剛更新的例子更容易重現... – JKB

回答

2

如果您從ul > li:hover{所以:hover之成爲

ul > li { 
    position: relative; 
    z-index: 998; 
} 

然後你提供的例子將工作。對不起,如果我誤解了這一點,但這是我的理解。顯然,只要轉換子的父元素同時修改其定位,FireFox就無法正確處理。這是根據此鏈接https://bugzilla.mozilla.org/show_bug.cgi?id=625289的已知錯誤。

如果你絕對需要懸停應用幀/位置修改樣式父元素,那麼你可能需要通過JavaScript,jQuery的,等另一個解決辦法,但在你的榜樣,只要它沒有任何改變。爲了證明這裏是一個工作JS提琴:JSFiddle

+0

謝謝!當我刪除:懸停時,轉換本身正在工作。但是這會導致另一個問題:當幾個一級物品包含二級物品時,二級物品不能正確顯示其父級。這意味着2級被關閉,另一父母取決於光標y位置二級得到顯示,雖然光標沒有離開原產地2級UL塊 – JKB