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

Posted 2023-02-19

【中文标题】CSS3 垂直弹出菜单 + 过渡在 FF 中不起作用

【英文标题】：CSS3 vertical flyout menu + transitions not working in FF

【发布时间】：2014-02-21 12:49:38

【问题描述】：

我有一个垂直弹出导航。第二级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

【问题讨论】：

我刚刚更新了示例以更容易重现...

【参考方案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

【讨论】：

谢谢！当我删除：悬停时，转换本身正在工作。但这会导致另一个问题：当多个 1 级项目包含 2 级项目时，不能正确显示其父级的 2 级。这意味着第二级被关闭，另一个父级第二级根据光标的 y 位置显示，尽管光标没有离开原始第二级 ul 块