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

它在 firefox 中运行良好。非常感谢任何帮助。提前致谢。

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>菜单关闭后正在播放的元素。在不知道您要完成什么的情况下，一个简单的解决方案是从这些中删除转换。

这是一个有效的 fiddle : http://jsfiddle.net/71f15Lc6/1/