如何创建子菜单下拉延迟

Question

我有一个水平菜单，看起来像这样：

                    Home    Shop    Sale    B2B    About    Contact

当您将鼠标悬停在任何这些父级链接上时，会有与之关联的子级链接。

像这样：

                    Home    SHOP    Sale    B2B    About    Contact
            Shop 1    Shop 2    Shop 3    Shop 4

我的问题是，当我浏览链接并且我的鼠标移动没有被点亮时，在我的菜单周围进行操作变得非常困难而不会偏离到父链接并显示一组不同的子菜单项。 / p>

所以我想要实现的目标如下：

如果我的'SHOP'父菜单已打开并显示'Shop 1 - Shop 4'并且我将暂时偏离'Sale'父菜单链接，则除非我徘徊，否则不会出现'Sale'的子链接'出售'几秒钟。

如何使用CSS＆amp; amp;仅限HTML？我的菜单非常复杂，所以我一直试图在这个菜单上找到它：

JSFIDDLE

Answer 1

您可以尝试在元素悬停时使用css过渡，例如

#item:hover{
     /*your styles here*/
     -moz-transition:all 1s linear;
     -webkit-transition:all 1s linear;
     -o-transition:all 1s linear;
     transition:all 1s linear;
}

在我的情况下，我使用1s作为延迟时间。您可以将其更改为您喜欢的任何值。