Pure CSS3 LavaLamp选项卡菜单中的问题悬停

Question

我在我的网站上实现了Lavalamp标签菜单：当鼠标进入绝对Div＆＃34;＃lavalamp＆＃34;底部＆＃34;潜艇＆＃34; div不显示。如何解决这个问题，请帮助我。

Detail code click here

<ul id="nav">
<li><a class="hsubs" href="#">Magento</a>
    <div class="subs colbg01">
        Submenu 1
    </div>
</li>

<li><a class="hsubs" href="#">Wordpress</a>
    <div class="subs colbg02">
        Submenu 2
    </div>
</li>

<li><a class="hsubs" href="#">Mobile App</a>
    <div class="subs colbg03">
        Submenu 3
    </div>    
</li>
<div id="lavalamp"></div>

Answer 1

当您将鼠标悬停在三角形上时会出现问题，这会导致下划线li丢失自己的悬停，从而使有效的li:nth-child(..) ~ #lavalamp规则无效。

您可以通过禁用lavalamp元素

上的指针事件来解决现代浏览器的这个问题

#lavalamp{pointer-events:none;}

演示http://jsfiddle.net/gaby/6Lmgkhxd/4/

---

通知 ：IE在v11上添加了对pointer-events的支持

Answer 2

这不起作用的原因是因为当悬停在#lavalamp元素（稍后出现在DOM中）时，li的悬停状态被破坏。

如果你真的想要一个CSS修复，你可以使用z-index将三角形放在其他所有东西之后，让li向前推进。

像：

#nav li {
    float: left;
    display: block;
    padding: 16px 20px 18px 20px;
    z-index: 1; // <--- added this
}

#lavalamp {
    z-index: -1; // add this
    ... other code
}

示例：http://jsfiddle.net/6Lmgkhxd/3/

我将li的背景颜色更改为透明，以使其正常工作。

此外，li和.subs之间似乎存在微小的差距所以我增加了li的底部填充以更好地重叠到位于.subs的50px顶部（来自16px到18px）