IE10 content disappears on second hover

Question

Fiddle with error: http://jsfiddle.net/GZdqh/8/

This error only appears to happen in IE10 on both Windows 7 and 8. Does not happen on IE8, IE9 or IE11.

Steps to recreate:

1. hover over a link with a dropdown (Menu Item 1st - 2), the content appears.
2. move the mouse out of the dropdown and let the dropdown disappear.
3. hover over the same link, the content does not appear where it did previously.

The wrapper UL seems to appear, but with no content inside it.

I've struggled to search for a solution, it's difficult to describe, I'm not sure 'second hover' is descriptive enough, but I couldn't think of anything else.

The 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>

The css:

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

Since your menu is on another z-index, would it be possible to use visibility instead?

Here's a DEMO

You need to change these two things

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

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

As to why IE10 messes up the display:block; style in this case I'll leave to someone else to explain.