如何让metisMenu在鼠标悬停时自动展开？答案

【问题标题】：How to make metisMenu auto expand on mouse hover?如何让metisMenu在鼠标悬停时自动展开？
【发布时间】：2017-08-08 21:15:03
【问题描述】：

我将metisMenu 用于管理员面板。我想让我的侧边栏菜单在鼠标悬停时以平滑的速度自动展开。我正在使用二进制主题的免费软件advance admin template。我已经使用以下 CSS 代码在鼠标上完成了自动扩展，但是扩展速度非常快，不受我的控制。

自动展开的 CSS 代码

.nav li:hover > ul {
    display: block;
}

上面的代码可以工作，但是为了增加延迟，我使用了 jQuery，但这不起作用。

我的 jQuery 代码：

$('.nav li').hover(function(){
    $('li').delay(1000).fadeIn('slow');
});

我还使用过渡效果transition:all 200ms ease-in-out 0s !important; 来平滑自动展开，但这不起作用。

【问题讨论】：

查看mm.onokumus.com/mm-vertical-hover.html - 如果在 Safari 中看起来不正常，请尝试 .sidebar-nav .metismenu > li {flex: 1 1 auto;}。 200ms 也是 1/5 秒。相当快;-)

【解决方案1】：

MetisMenu 支持像这样使用animate.css 进行动画处理：

<ul class="animated bounce"> ... </ul>

您还需要在文档中包含 animate.min.css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

如果它不起作用，请尝试通过暂时禁用模板中的其他 CSS 文件来消除任何冲突以缩小问题范围。

【讨论】：