Выпадающий список IE7 исчезает - НЕ фиксируется по положению: относительно родителя

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

GIF-иллюстрация

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

Это не сработало для меня, и я все равно не могу найти в содержимом своей страницы ничего, что имело бы более высокий z-индекс, чем меню. (Во-первых, в меню ничего не закрашивается.) Есть какие-нибудь подсказки? Вот моя разметка (или см. Codepen):

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

Любая помощь будет оценена по достоинству.