将鼠标悬停在带有display：table的下拉菜单上，无法在IE中使用

Question

我正在做一个类似于bootstrap的下拉菜单。唯一的区别是我的下拉菜单的默认状态是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; 
}    

updated codepen