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

Question

我有一个垂直弹出导航。第二级ul 块通过在父级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 的部分：

导航一个{ 显示：块； } 导航：悬停， 导航 li.selected > a{ 颜色：#00fa30； } nav li:hover > a, 导航 li.selected > a{ 颜色：#00fa30； } 导航{ 填充：0px； 边距：0px； 列表样式类型：无； } 导航 > ul{ 边框底部：2px 实心 #006666; 字体大小：16px； 字母间距：1px； 宽度：212px； } 导航 > ul > li{ 边框顶部：2px 实心 #006666; 填充：6px 0px； 行高：19px； 文本转换：大写； } 导航 > ul > li:hover{ 位置：相对； z指数：998； } 导航 > ul > li > ul{ 位置：绝对； 顶部：-2px； 左：212px； z指数：999； 不透明度：0； 边框：2px 实心 #006666; 填充：0px 6px； 背景颜色：#eae9e7； 字体大小：16px； 字母间距：1px； 宽度：180px； } 导航 > ul > li:hover ul{ 不透明度：1； -webkit-transition：不透明度 0.6s 缓入； -moz-transition：不透明度 0.6s 缓入； -o-transition：不透明度 0.6s 缓入； -ms-transition：不透明度 0.6s 缓入； 过渡：不透明度 0.6s 缓入； } 导航 > ul > li > ul > li{ 边框底部：2px 实心 #006666; 填充：6px 0px； 行高：0px； 文本转换：大写； } 导航 > ul > li:hover > ul > li{ 行高：19px； } 导航 > ul > li > ul > li:last-child{ 边框底部：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