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中的部分：

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

演示

Answer 1

如果从ul>li:hover{中删除:hover，使其变为

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

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

如果您绝对需要将悬停时的框架/位置修改样式应用到父元素，那么您可能需要通过javascript、jQuery等进行其他操作，但在您的示例中，它没有改变任何内容。下面是一个工作的js小提琴：JSFiddle