Question

我想稍微扩展CSS下拉菜单的悬停区域，以便鼠标位置可以从下拉列表中延伸10px而不会折叠它。我试图用一个看不见的“包装”div来实现它，它在FireFox，Chrome和Safari中运行良好，但在IE中不起作用（目前在IE10中测试）。

IE确实会识别悬停在不可见的“包装器”div上，但前提是div后面没有其他内容。（如果我将包装背景更改为颜色，则无论如何都会识别悬停。）

有没有人在IE中有一致的悬停行为解决方案，或者是一个简单的CSS替代隐藏的悬停边距？

这是Fiddle。

这是我的代码：

<div class="menu">
<ul class="menu-item">
<li>
<a href="" class="menu-link">Item 1</a>
<div class="menu-item-list-wrapper">
    <div class="menu-item-list">
        <a href="">Link 1</a><br />
        <a href="">Link 2</a>
    </div>
</div>
</li>
</ul>
<ul class="menu-item">
...
</ul>
...
</div>

.menu
{
    float:right; margin:20px;
}
.menu-item {
    float:right; position:relative; list-style:none;
    margin:5px; padding:0px;
    z-index:2;
}
.menu-link {
    padding:5px; border:solid 1px blue;
}
.menu-item li
{
    z-index:2;
}
.menu-item-list-wrapper {
    position:absolute; display:none;
    top:23px; right:-10px;
    height:120px; width:220px; padding:0px;
    z-index:2;
    border:dashed 1px #BBB;  /* For Demonstration */
}
.menu-item-list{
    position:absolute;
    top:10px; right:10px;
    height:80px; width:180px; padding:10px; 
    background:white; border:solid 1px blue;
    z-index:2;
}
.menu-item li:hover .menu-item-list-wrapper
{
    display:block;
    z-index:2;
}

Internet Explorer中的扩展下拉菜单悬停边距

0 个答案: