internet-explorer - 将鼠标悬停在带有显示的下拉菜单上：表格在 IE 中不起作用

Question

我正在做一个类似于引导程序的下拉菜单。唯一的区别是我的下拉菜单的默认状态是display: table因为我需要菜单看起来像一个表格。不幸的是，这在 IE10 中不起作用：

http://codepen.io/anon/pen/LfdoB

它可以在 safari、chrome 和 firefox 中正常工作。

在 IE 中发生的情况是第一次悬停有效，但随后的悬停不显示下拉菜单，但我确实看到了框阴影。似乎height: 0，虽然设置height: auto没有做任何事情。

Answer 1

我真的不知道为什么 IE 会这样。

无论如何，我让它工作显示：表永久（即在正常状态下）并隐藏 - 通过可见性显示它：

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: table;
    visibility: hidden;
    min-width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px 4px rgba(0, 0,0, .15);
}

:hover > .dropdown-menu {
    visibility: visible; 
}    

更新的代码笔