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

时间:2013-03-19 22:16:53

标签: css internet-explorer css3

我正在做一个类似于bootstrap的下拉菜单。唯一的区别是我的下拉菜单的默认状态是display: table,因为我需要菜单看起来像一张桌子。不幸的是,这在IE10中不起作用:

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

它在safari,chrome和firefox中正常工作。

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

1 个答案:

答案 0 :(得分: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