hovering over a dropdown menu with display: table doesn't work in IE

Problem

I'm doing a dropdown menu similar to bootstrap's. the only difference is that my dropdown-menu's default state is display: table because i need the menu to look like a table. unfortunately, this doesn't work in IE10:

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

It works correctly in safari, chrome, and firefox.

What happens in IE is that the first hover works, but subsequent hovers do not show the dropdown-menu, but i do see the box-shadow. it seems that height: 0, though setting height: auto doesn't do anything.

Problem courtesy of: Jonathan Ong

Solution

I really don't know why IE is behaving like that.

Anyway, I get it to work making display:table permanent (that is, in the normal state) and hidding - showing it thru visibility:

.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

Solution courtesy of: vals

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.