子菜单悬停在 Chrome 中的过渡效果

Question

>我有一个带有第二级下拉菜单的顶部菜单栏。它在FF中工作正常，但在Chrome中则不行。

在Chrome中，鼠标退出时，背景颜色首先消失，然后链接消失。因此，颜色和链接之间存在一点消失的时间差距。

这是代码：

<nav class="top_menu">
    <ul class="show-for-medium-up">
        <li class="first active"><a href="index.php">Home</a>
        </li>
        <li><a href="weddings.php">About Us</a>
        </li>
        <li class="rev has_dropdown"><a href="wedding-services.php">wedding services</a>
            <ul class="dropdown">
                <li class="first"><a href="#">wedding decor</a>
                </li>
                <li><a href="#">lights &amp; drapping</a>
                </li>
                <li><a href="#">linen</a>
                </li>
                <li><a href="#">catering</a>
                </li>
                <li><a href="#">transport</a>
                </li>
            </ul>
        </li>
        <li class="last"><a href="contact.php">contact us</a>
        </li>
    </ul>
</nav>

演示：http://jsfiddle.net/squidraj/71f15Lc6/

它在火狐中工作正常。任何帮助都非常感谢。提前谢谢。

Answer 1

这些部分：

a {
    font-weight: 600;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}
.top_menu ul li ul li a {
    color:#bcb194;
    width:100%;
    display:block;
    padding:0.5rem 0 0.5rem 0.8rem;
    margin:0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    font-weight:normal;
    text-transform: uppercase;
}

这些部分具有菜单关闭后播放的各个<a>元素的过渡。在没有确切知道您要完成什么的情况下，一个简单的解决方案就是从中删除这些过渡。

这是一个工作小提琴：http://jsfiddle.net/71f15Lc6/1/