我有一個垂直彈出式導航。通過在父母li:hover;
上將其不透明度從0設置爲1來顯示第二級ul
塊。這在IE和其他程序中工作正常,但在FF中,轉換效果不起作用。CSS3垂直彈出式菜單+轉換在FF中不起作用
的HTML標記:從CSS
<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>
部分:
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; }
我剛剛更新的例子更容易重現... – JKB