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>元素的过渡效果。如果不确切知道你想要完成什么，一个简单的解决方案就是从这些中删除转换。

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

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

1 个答案: