CSS Submenu under its parent - html

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/