CSS3 vertical flyout menu + transitions not working in FF

Question

I've got a vertical flyout navigation. The 2nd level ul block is shown by setting its opacity from 0 to 1 on the parents li:hover;. This works fine in IE and others, but in FF the transition effect doesn't work.

The HTML markup:

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

Part from the 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

AdamM AdamM · Accepted Answer · 2014-01-29T16:46:25

If you remove the :hover from ul > li:hover{ so that it becomes

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

then your example provided will work. Sorry if I misinterpret this but here is my understanding. Apparently FireFox cannot properly handle whenever a parent element of a transitioning child has its positioning modified simultaneously. This is a known bug according to this link https://bugzilla.mozilla.org/show_bug.cgi?id=625289.

If you absolutely need to apply frame/position modifying styles on hover to the parent element then you may need another work around via javascript, jQuery, etc, but in your example provided it didn't change anything. For proof here is a working js fiddle: JSFiddle

CSS3 vertical flyout menu + transitions not working in FF

1 Answers