Question

我有一个垂直弹出导航。通过在父ul上将其不透明度从0设置为1来显示第二级li:hover;块。这在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

如果您从:hover移除ul > li:hover{以使其成为

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

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

如果你绝对需要在悬停到父元素时应用框架/位置修改样式，那么你可能需要通过javascript，jQuery等进行另一种解决方法，但在你提供的例子中它并没有改变任何东西。为了证明这里是一个工作js小提琴：JSFiddle

CSS3垂直弹出菜单+转换在FF中不起作用

1 个答案: