La liste déroulante IE7 disparaît - PAS fixée par position: relative au parent

Question

J'ai un menu déroulant CSS pur standard qui doit être supporté par IE7. Mon bug est que le sous-menu va disparaître lorsque l'utilisateur déplace sa souris sur les liens.

GIF illustration

Je lis sur les contextes d'empilement IE7 et je crois savoir que je devrais être en mesure de mettre { position: relative; z-index: (something large); } sur l'élément parent de mon menu pour traiter le sous-menu disparaître.

Cela n'a pas fonctionné pour moi, et je ne trouve rien dans mon contenu de page qui aurait un z-index plus élevé que le menu de toute façon. (Pour une chose, rien ne se peint sur le menu.) Avez-vous des indices? Voici mon code (ou voir 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> 

Le CSS (couleurs supprimées):

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

Toute aide serait appréciée.

Answer 1

ul.nav-main ul.nav-sub { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    top: 100%; 
} 

il fonctionne parfaitement pour moi dans IE7

codepen