IE10 콘텐츠

Question

바이올린 오류와 함께 두 번째 호버에 사라 : http://jsfiddle.net/GZdqh/8/는

이 오류는 IE8, IE9 또는 IE11에서 발생하지 않습니다 Windows 7 및 8 모두에서 IE10에서 일어날 것으로 보인다.

단계 재현하기 : 드롭 다운 (메뉴 항목 1 - 2)와 링크를 통해

1. 가져가, 내용이 나타납니다.
2. 마우스를 드롭 다운 밖으로 이동하고 드롭 다운을 사라지게하십시오.
3. 같은 링크를 가리키면 이전에 콘텐츠가 표시되지 않습니다.

래퍼 UL이 나타나지만 내용이 없습니다.

나는 해결책을 찾는데 어려움을 겪었습니다. 설명하기가 어려웠습니다. 두 번째 호버가 충분히 설명력이 있지만, 다른 것을 생각할 수 없었습니다.

HTML :

<header> 
    <nav> 
     <ul id="navigation"> 
      <li class="current"><a href="#" title="Home">Home</a></li> 
      <li class="drop"> 
       <a href="#" title="Menu Item 1st - 2">Menu Item 1st - 2</a> 
       <ul> 
        <li> 
         <a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 1</a> 
         <ul> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 2</a> 
         <ul> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="drop"> 
       <a href="#" title="Menu Item 1st - 2">Menu Item 1st - 3</a> 
       <ul> 
        <li> 
         <a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 1</a> 
         <ul> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 2</a> 
         <ul> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li> 
          <li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 
</header> 

는 CSS : 메뉴가 다른 Z- 인덱스에 있기 때문에

이

header { 
    position: relative; 
    z-index: 2; } 
    header nav { 
    clear: both; 
    margin-bottom: 10px; } 
    header nav a { 
     font-family: "Open Sans"; 
     font-weight: 400; } 
    header nav > ul { 
     background-color: #3a3db6; 
     background-image: linear-gradient(#3a3db6, #3639a3); 
     width: 100%; 
     height: 30px; 
     padding: 5px 0; } 
     header nav > ul > li > ul { 
     display: none; 
     overflow: hidden; 
     position: absolute; 
     top: 40px; 
     border-radius: 0 10px 10px 10px; 
     background: white; 
     background-image: linear-gradient(white 1%, #efefef 4%, white 6%); 
     padding: 20px 10px 10px 10px; 
     min-width: 600px; 
     box-shadow: 0px 0px 5px #333333; 
     z-index: 3; 
     column-count: 3; 
     column-gap: 20px; } 
     header nav > ul > li { 
     display: block; 
     float: left; 
     position: relative; 
     border-right: 1px solid #6165dd; 
     margin-right: -1px; } 
     header nav > ul > li:last-of-type { 
      border-right: 0; } 
     header nav > ul > li > a { 
      display: block; 
      line-height: 30px; 
      text-align: center; 
      color: white; 
      text-decoration: none; 
      font-family: "Open Sans"; 
      font-weight: 400; 
      padding: 0 15px; } 
     header nav > ul > li > a:hover { 
      color: #f9c00d; } 
     header nav > ul > li.drop:hover { 
      height: 30px; } 
      header nav > ul > li.drop:hover > a { 
      position: relative; 
      background: white; 
      width: 90%; 
      margin-top: -10px; 
      height: 50px; 
      line-height: 50px; 
      border-right: 0; 
      border-radius: 10px 10px 0 0; 
      z-index: 4; 
      color: #3a3db6; 
      box-shadow: 0px 0px 5px #333333; 
      background-image: linear-gradient(#efefef 0, white 20%); } 
      header nav > ul > li.drop:hover > a:after { 
       content: ""; 
       display: block; 
       position: absolute; 
       background: white; 
       bottom: -4px; 
       left: 0; 
       right: 0; 
       height: 4px; } 
      header nav > ul > li.drop:hover > ul { 
      display: block; } 
      header nav > ul > li.drop:hover > ul a { 
       display: block; 
       text-decoration: none; 
       color: #3a3db6; } 
       header nav > ul > li.drop:hover > ul a:hover { 
       text-decoration: underline; } 
      header nav > ul > li.drop:hover > ul > li { 
       padding-bottom: 10px; } 
      header nav > ul > li.drop:hover > ul ul a { 
       color: dimgrey; 
       font-size: 80%; 
       padding-left: 14px; 
       margin-left: 9px; 
       background: url(/images/nav-list.png) no-repeat left top; } 
      header nav > ul > li.drop:hover > ul ul li:last-of-type a { 
       background-position: left bottom; } 

Answer 1

, 그것은 가능할 것이다 대신 visibility를 사용하는?

여기 당신은 내가 설명하는 다른 사람에게 떠날거야 IE10이 경우에 display:block; 스타일을 망쳐 놨 이유에 관해서는이 두 가지

header nav > ul > li > ul { 
    /*display:block;*/ 
    visibility:hidden; 
} 

header nav > ul > li.drop:hover > ul { 
    /*display:block;*/ 
    visibility:visible; 
} 

을 변경할 필요가 DEMO

입니다.