1

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.

Jonathan Ong
  • 19,927
  • 17
  • 79
  • 118

1 Answers1

1

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

vals
  • 61,425
  • 11
  • 89
  • 138
  • semi-related question, if i use `visibility: hidden`, is it guaranteed that the dropdown menu won't be clickable when hidden? – Jonathan Ong Mar 20 '13 at 22:42
  • the elements with visibility:hidden don't fire mouse events. See [http://stackoverflow.com/q/5659563/1926369]. Or at least, they shouldn't, it's difficult to say it's warranted :-) – vals Mar 21 '13 at 08:25
  • Why IE Why could be one of the most popular phrases :-) – vals Mar 21 '13 at 08:37