IE7 드롭 다운이 사라짐 - 위치에 의해 고정되지 않음 : 부모와의 관계가

Question

나는 순수한 IE 드롭 다운 메뉴가 있는데, IE7에 다시 지원해야합니다. 내 버그는 사용자가 마우스를 링크 아래로 이동하면 하위 메뉴가 사라진다는 것입니다.

GIF illustration

나는 IE7 스택 상황에 대해 읽고 그리고 그것은 내가 사라지고 하위 메뉴를 다루는 내 메뉴의 부모 요소에 { position: relative; z-index: (something large); }을 설정 할 수 있어야한다 나의 이해이다.

이것은 저에게 효과적이지 않으며 어쨌든 메뉴보다 높은 z- 색인을 가진 내 페이지 콘텐츠에서 아무것도 찾을 수 없습니다. (한 가지는 아무것도 실제로 메뉴 위에 그려지지 않습니다.) 단서가 있습니까?

<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의 (색 제거) : 여기 (또는 Codepen 참조) 내 마크 업입니다

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

어떤 도움을 주시면 감사하겠습니다.

Answer 1

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

그것은
codepen