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

Question

I implemented the Lavalamp tab menu in my website: when Mouse goes on absolute Div "#lavalamp" bottom "subs" div not display.How to fixed this, please help me.

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

The problem happens when you hover over the triangle, which causes the underlining li to lose its own hover and thus invalidating the active li:nth-child(..) ~ #lavalamp rule.

You can solve this issue with modern browsers by disabling the pointer events on the lavalamp element

#lavalamp{pointer-events:none;}

demo at http://jsfiddle.net/gaby/6Lmgkhxd/4/

---

Notice : IE added support for pointer-events on v11

Answer 2

The reason this is not working is because the hover state of the li is being broken when hovering over the #lavalamp element (which appears later in the DOM).

If you really want a CSS only fix you can use z-index to place the triangle behind everything else and bring the li forward.

like:

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

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

example: http://jsfiddle.net/6Lmgkhxd/3/

I changed the li's background-color to transparent to allow this to work.

Also there seems to be a slight gap between the li and the .subs so I increased the bottom padding of the li to overlap better to the 50px top positioned .subs (from 16px to 18px )