html - CSS3 垂直弹出菜单 + 过渡在 FF 中不起作用

Question

我有一个垂直弹出导航。第二级 ul block 通过在父级 li:hover; 上将其不透明度设置为 0 到 1 来显示。这在 IE 和其他浏览器中工作正常，但在 FF 中过渡效果不起作用。

HTML 标记:

<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>

CSS 部分:

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

Answer 1

如果您从 ul > li:hover{ 中删除 :hover，它就变成了

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

那么您提供的示例将起作用。对不起，如果我误解了这一点，但这是我的理解。显然，每当转换子元素的父元素同时修改其定位时，FireFox 无法正确处理。根据此链接，这是一个已知错误 https://bugzilla.mozilla.org/show_bug.cgi?id=625289 .

如果您绝对需要在悬停时将框架/位置修改样式应用于父元素，那么您可能需要通过 javascript、jQuery 等进行另一项工作，但在您的示例中，前提是它没有改变任何东西。为了证明这是一个有效的 js fiddle :JSFiddle