Падащото меню на IE7 изчезва - НЕ е фиксирано от позиция: относително към родител

Имам стандартно чисто CSS падащо меню, което трябва да се поддържа обратно към стария IE7. Грешката ми е, че подменюто ще изчезне, когато потребителят движи мишката надолу по връзките.

GIF илюстрация

Четох за контекстите на подреждане на IE7 и разбирам, че трябва да мога да задам { position: relative; z-index: (something large); } на родителския елемент на моето меню, за да се справя с изчезващото подменю.

Това не проработи при мен и така или иначе не мога да намеря нищо в съдържанието на страницата си, което да има по-висок z-индекс от менюто. (От една страна, всъщност нищо не се рисува върху менюто.) Имате ли някакви улики? Ето моето маркиране (или вижте Codepen):

<div class="mainmenu">
  <div class="row">
    <a href="/bg/" class="pull-left">
      <img src="logo.png" class="logo">
    </a>
    <ul class="nav-main">
      <li><a href="/bg/">Item 1</a></li>             
      <li><a href="/bg/">Item 2</a></li>             
      <li><a class="dropdown">Item 3 </a>
        <ul class="nav-sub">
          <li><a href="/bg#">Sub-Item 1</a></li>
          <li><a href="/bg#">Sub-Item 2</a></li>
          <li><a href="/bg#">Sub-Item 3</a></li>
        </ul>
      </li>              
      <li><a class="dropdown">Item 4 </a>
        <ul class="nav-sub">
          <li><a href="/bg#">Sub-Item 1</a></li>
          <li><a href="/bg#">Sub-Item 2</a></li>
          <li><a href="/bg#">Sub-Item 3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="content">
    <!-- Then some page content -->
</div>

CSS (премахнати цветове):

.mainmenu { 
  position: relative;
  top: 0;
  z-index: 597;
  width: 100%; 
  height: 66px;
  margin: 0;
  padding: 0 22px; 
}
.mainmenu .logo  { 
  height: 39px; 
  margin: 16.5px 0; 
  vertical-align: middle; 
}
ul.nav-main {
  margin: 0; 
  float: right; 
  padding: 0 20px; 
  position: relative; 
  top: 0;
}
ul.nav-main a,
ul.nav-main li { 
  -webkit-transition: all 0.1s linear; 
     -moz-transition: all 0.1s linear; 
       -o-transition: all 0.1s linear; 
          transition: all 0.1s linear; 
}
ul.nav-main li {
  list-style-type: none;    
  padding: 22px 8px;
  float: left; 
}
ul.nav-main li a,
ul.nav-main li span {
  display: block; 
}
ul.nav-main li:hover ul { 
  visibility: visible; 
  opacity: 1; 
}
ul.nav-main ul.nav-sub { 
  visibility: hidden; 
  opacity: 0; 
  position: absolute; 
  padding: 0; 
  margin: 0;
  top: 66px; 
}

ul.nav-main ul.nav-sub li {
  display: block;
  float: none; 
  padding: 0;
  outline: 1px solid #aaa;
}
ul.nav-main ul.nav-sub li a,
ul.nav-main ul.nav-sub li span {
  display: block;
  padding: 11px; 
}

Всяка помощ ще бъде оценена.