CSS Submenu under its parent

Question

I have a navigation:

<ul> 
 <li>Button
    <div class="sub-container">Sub navigation</div> 
 </li>
</ul>

Sub container is set to opacity 0 and on hover of LI opacity goes to 1. Now I have a problem that sub-container has a border and that border is on top of the parent LI element. I want LI element to be on TOP of the sub-container child element. So that they will look "merged".

I tried z-index -1 solution which works PERFECTLY in FireFox, but in Chrome it crashes.

Screenshot:

This is my CSS code:

#topBarHeader nav ul.main-nav {
  list-style: none;
  position: absolute;
  left:0;
  display: inline-block;
  z-index: 100;
}
#topBarHeader nav ul.main-nav > li {
  float: left;
  display: inline-block;
  padding: 15px 17px 10px 17px;
  border: 1px solid rgba(255, 255, 255, 0);
  margin-right: 10px;
}
#topBarHeader nav li .sub-container {
  position: absolute;
  top: 49px;
  left: 0px;
  width: 640px;
  opacity: 0;
  visibility: hidden;
  overflow: scroll;
  overflow-x: hidden;
  height: 380px;
  background: white;
  z-index: -1;
  border: 1px solid #d5dbdf;

}
#topBarHeader nav li:hover > .sub-container {
  opacity: 1;
  visibility: visible;
}

Here is the link to my page menu. (very slow, on a bad server.)

Answer 1

You should try declaring position: relative on the parent <li> element, or else absolute positioning may not work properly.

I wouldn't say this is a bug with Chrome, but more like how different browsers attempt to handle ambiguous rules when there isn't enough information.

---

[Edit]: I think I understand your problem now. The trick to make the top border disappear behind the active tab, is to actually wrap the content in the <li>, and then assigning it a higher z-index compared to the dropdown content, and change the bottom border colour to match the background so that it disappears.

Here is a Fiddle as a proof-of-concept - http://jsfiddle.net/teddyrised/EPYvq/