Javascript 引导悬停效果在IE 11中未按预期工作

下面是我的

div

结构。我正在尝试创建超级菜单。与用户将鼠标悬停在

按钮上时一样，在
下拉列表中，菜单将显示
slideDown
/
slideUp
效果。但最初它甚至在chrome中也不起作用，当鼠标悬停在
dropdown
div中的任何位置时，菜单开始向下/向上滑动

i、 e悬停效果应用于整个div，而不是悬停在按钮上。因此，我为chrome使用了
display:contents
属性并得到了修复，但同样的修复对IE 11不起作用，因为IE 11不支持
display:contents

<div class="row">
    <div class="dropdown">
        <button class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            <span class="btn">Hover to see menu</span>
        </button>
        <div class="dropdown-menu">
            <!-- for responsive bootstrap grid combination will here -->
            <div class="row">
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
            </div>
        </div>
    </div>
</div>


悬停以查看菜单

为了精确和清晰，我想应用悬停效果，只有当用户将鼠标悬停在div内容内而不是整个div的任何地方时，才显示菜单上下滑动。花了近3天的时间在这上面，但没有运气

谢谢你的帮助。
我建议你用CSS、JS代码发布一个代码示例。以便我们可以尝试运行并检查问题。我们无法使用您的上述HTML代码生成问题。即使使用chrome，它也不起作用。正如您已经知道的，显示：IE中不支持内容，我也没有为IE浏览器提供任何替代方案。作为Bootstrap Mega下拉列表的替代方案，您可以参考此示例。它正在使用IE浏览器。我建议你用你的CSS，JS代码发布一个代码示例。以便我们可以尝试运行并检查问题。我们无法使用您的上述HTML代码生成问题。即使使用chrome，它也不起作用。正如您已经知道的，显示：IE中不支持内容，我也没有为IE浏览器提供任何替代方案。作为Bootstrap Mega下拉列表的替代方案，您可以参考此示例。它正在使用IE浏览器。裁判：