将鼠标悬停在Safari浏览器中的按钮上时，不会显示下拉菜单

Question

我刚刚创建了一个下拉菜单，但我发现当你将鼠标悬停在safari浏览器中的“男装”按钮时，下拉菜单不会出现。它适用于Firefox，Chrome和Opera

我尝试使用display: none;和display: block代替visibility: hidden和visibility: visible，但是当我使用display标记时，悬停时会失去过渡效果“男装”按钮。如果我使用visibility标记，则Safari浏览器中缺少下拉菜单。

我该如何解决这个问题？

这是代码。

HTML：

    <nav class="navigation">
      <ul>
        <li class="nav-header"><a href="#">MEN'S WEAR</a>
          <ul class="dropdown-background" id="dropdown-bg1">
            <li class="dropdown-header"><a href="#">TOPWEAR</a>
               <ul>
                <li><a class="browse" href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">BOTTOMWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Jeans</a></li>
                <li><a class="browse"  href="#">Colour Jeans</a></li>
                <li><a class="browse"  href="#">Pants</a></li>
                <li><a class="browse"  href="#">Shorts</a></li>   
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">FOOTWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Boots</a></li>
                <li><a class="browse"  href="#">Sandals</a></li>
                <li><a class="browse"  href="#">Shoes</a></li>
                <li><a class="browse"  href="#">Snickers</a></li>         
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a class="browse"  href="#">Belts</a></li>
                <li><a class="browse"  href="#">Caps</a></li>
                <li><a class="browse"  href="#">Hats</a></li>
                <li><a class="browse"  href="#">Scarves</a></li>
                <li><a class="browse"  href="#">Gloves</a></li>
                <li><a class="browse"  href="#">Sunglasses</a></li>
                <li><a class="browse"  href="#">Watches</a></li>
                <li><a class="browse"  href="#">Jewelry</a></li>              
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">SALE</a>
              <ul>
                <li><a class="browse"  href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

CSS：

     .navigation {
      position: relative;
      background-color: #fff;
      width: 1024px;
      height: 42px;
      margin: 0 auto;
      border-bottom: 1px solid #ddd;
      -webkit-font-smoothing:antialiased;
    }

    .navigation a {
      -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
    }

    .nav-header { 
      width: 110px;
      height: 30px;
      float: left;
      padding-top: 13px;
      padding-left: 10px;
      list-style: none;
      position: relative;
      font-weight: bold;
        -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
     }

     nav ul:nth-of-type(2) > li.nav-header { width: 140px; }
     nav ul:nth-of-type(3) > li.nav-header { width: 103px; }
     nav ul:nth-of-type(4) > li.nav-header { width: 118px; }
     nav ul:nth-of-type(5) > li.nav-header { width: 78px; }
     nav ul:nth-of-type(6) > li.nav-header { width: 50px; }


    .nav-header:hover { background: #000; }


    .nav-header ul {
      position: relative;
      overflow: hidden;
      visibility: hidden;
      top: 14px;
      opacity: 0;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;  
    }

    .nav-header:hover ul { visibility: visible; opacity: 1; }
    .nav-header a { text-decoration: none; color: #000; }
    .nav-header:hover a { color: #fff; }

    .dropdown-background { background: #000; width: 1024px; height: 265px; right: 10px;
    }

    #dropdown-bg2 { right: 130px; }
    #dropdown-bg3 { right: 280px; }
    #dropdown-bg4 { right: 393px; }
    #dropdown-bg5 { right: 521px; }
    #dropdown-bg6 { right: 609px; }

    .dropdown-header { position: relative; float: left; top: 10px; }
    .dropdown-header a { padding-right: 60px; color: #fff; padding-left: 10px; }
    .dropdown-header a:hover { text-decoration: underline; }

    .browse { font-weight: normal; font-size: 12px; line-height: 25px; }
    a.browse:hover { text-decoration: underline; color: #bebebe; }