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

我有一个垂直的弹出式导航。第二级

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;
    }
导航a{
显示：块；
}
导航a：悬停，
导航li.selected>a{
颜色：#00fa30；
}
导航李：悬停>a，
导航li.selected>a{
颜色：#00fa30；
}
导航ul{
填充：0px；
边际：0px；
列表样式类型：无；
}
导航>ul{
边框底部：2个实心#006666；
字体大小：16px；
字母间距：1px；
宽度：212px；
}
导航>ul>li{
边框顶部：2个实心#006666；
填充：6px 0px；
线高：19px；
文本转换：大写；
}
导航>超视距>视距：悬停{
位置：相对位置；
z指数：998；
}
导航>ul>li>ul{
位置：绝对位置；
顶部：-2px；
左：212px；
z指数：999；
不透明度：0；
边框：2px实心#006666；
填充：0px 6px；
背景色：#eae9e7；
字体大小：16px；
字母间距：1px；
宽度：180px；
}
导航>ul>li：悬停ul{
不透明度：1；
-webkit过渡：不透明度0.6s，易于使用；
-moz过渡：不透明度0.6s缓进；
-o型过渡：不透明度0.6s；
-ms转换：不透明度0.6s；
过渡：不透明度0.6s缓和；
}
导航>超视距>视距>超视距>视距{
边框底部：2个实心#006666；
填充：6px 0px；
线高：0px；
文本转换：大写；
}
导航>超视距>视距：悬停>超视距>视距{
线高：19px；
}
nav>ul>li>ul>li:最后一个孩子{
边框底部：0px；
} 
如果从
ul>li:hover{
中删除
：hover
，使其成为

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

那么你提供的例子就行了。很抱歉，如果我误解了这一点，但我的理解是这样的。显然，FireFox无法正确处理正在转换的子元素的父元素同时修改其位置的情况。根据此链接，这是一个已知的错误

如果您确实需要在鼠标悬停时将帧/位置修改样式应用于父元素，那么您可能需要通过javascript、jQuery等进行另一项工作，但在您的示例中，前提是它没有改变任何内容。为了证明这一点，这里有一个工作的js提琴：
我刚刚更新了示例，以便更易于复制…谢谢！当我删除以下内容时：悬停，转换本身正在工作。但这会导致另一个问题：当多个第一级项目包含第二级项目时，第二级未正确显示其父级。这意味着第二级关闭，另一父级第二级根据光标的y位置显示，尽管光标未离开原点第二级ul级块