Подменю CSS под его родителем

У меня есть навигация:

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

Sub-контейнер установлен на непрозрачность 0, а при наведении на непрозрачность LI - на 1. Теперь у меня есть проблема, что суб-контейнер имеет границу, а граница находится поверх исходного элемента LI. Я хочу, чтобы элемент LI находился в верхней части дочернего элемента подконтейнера. Так что они будут выглядеть "слитыми".

Я попробовал решение z-index -1, которое работает PERFECTLY в FireFox, но в Chrome он падает.

Снимок экрана:

Это мой код CSS:

#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;
}

Вот ссылка на меню моей страницы. (очень медленно, на плохом сервере.)