z-index google Chrome error

Question

Google Chrome is having error in the z-index of my css, I put a jquery slider plugin and it was above my menus, so I changed the z-index to change the position, only in firefox and safari works normally, When I hover over the product menu to open the sub menu, my entire menu disappears. I’ve read related questions and tried to mess with the hierarchy but got nothing, anyone knows of any solution?

Here is the jsfiddle file to test in firefox and then in Chrome will see the error: https://jsfiddle.net/ssqhnm9f/1/

body{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size:18px;
    background-color:#601516;
    overflow-y:scroll;
    overflow-x:hidden;
}

#container{
    width:100%;
    height:auto;
    margin:0;
    padding:0;  
    z-index:500;
}

/* Header */
.header{
    width:100%;
    height:auto;
    position:fixed;
    z-index:500;
    overflow:hidden;
    margin:0;
    padding:0;
}
/* ----------------------------------------------------------------------------*/

/* Cadastro Menu */
.cadastroMenu{
    width:100%;
    height:auto;
    margin:0;
    text-align:right;
    background-color:#222;  
}

.headerLogo{
    width:70px;
    height:70px;
    float:left;
    display:inline-block;
    margin:8px;
    margin-left:20px;   
}
/* --------------------*/

.cadastroMenu ul{
    height:82px;
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.cadastroMenu ul li{
    display:inline-block;
}

.cadastroMenu ul li:hover{
    background-color:#333;  
}

.cadastroMenu ul li a,visited{
    color:#ccc;
    display:block;
    text-decoration:none;
    padding:30px;
    padding-right:50px;
    padding-left:50px;
    text-align:center;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
}

.cadastroMenu ul li a:hover{
    color:#ccc;
    text-decoration:none;   
}

/* Barra e Caixa Pesquisa */
#caixaPesquisa{
    padding-left:15px;
}

#pesquisa{
    width:160px;
    height:50px;
    margin-left:10px;
    display:none;
    position:absolute;
    text-align:center;
    border:1px solid #222222;   
}
/* ---------------------------*/
/* Navigation Menu */

.lupa{
    width:30px;
    height:30px;    
}

.flechaVertical{
    width:8px;
    height:8px;
    padding-left:8px;
    padding-top:8px;
    position:absolute;  
}

.menuMobile{
    display:none;   
}

.navLogo{
    width:160px;
    height:90px;    
}

.nav{
    width:100%;
    margin:0;
    text-align:left;
    background-color:#FFFFFF;
    position:fixed;
    z-index:500;
}

.nav ul{
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.nav ul li{
    display:inline-block;   
}

.nav ul li a,visited{
    color:#000000;
    display:block;
    padding:10px;
    padding-left:85px;
    text-decoration:none;   
}

.nav ul li a:hover{
    color:#990000;
    text-decoration:none;   
}
/*-------------------------------------*/

/* Nav Submenu */

.nav ul li:hover ul{
    display:block;  
}

.nav ul ul{
    display:none;
    position:absolute;
    background-color:#FFFFFF;
    margin-left:85px;
    z-index:500;
}

.nav ul ul li{
    display:block;
    padding:8px;    
}

.nav ul ul li a,visited{
    color:#000000;
    padding:0;  
}

.nav ul ul li a:hover{
    color:#FFFFFF;
    background-color:#990000;   
}

    main{
    width:100%;
    height:auto;
    position:absolute;
    top:255px;
}

    <div id="container">
<!-- Cadastro e Login  Menu -->
<header id="header" class="header">
    <div class="cadastroMenu">
        <ul>
            <a href="#"><img class="headerLogo" alt="Logo" src="img/logo.png" ></a>
            <li><a href="#">Cadastrar</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
<!-- ----------------------------------------------------------------------->
<!-- Menu Principal -->
<nav class="nav" id="nav"><span class="menuMobile" id="menuMobile" onClick="MenuMobile()">&#9776</span>
  <ul id="navulfirst">
    <li><a href="#"><img class="lupa" alt="Pesquisar" src="img/lupa.png" ></a>
      <div id="caixaPesquisa">
        <form id="formPesquisa" action="" method="post">
          <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar...">
        </form>
      </div>
    </li>
    <li><a href="#">Página Inicial</a></li>
    <li><a href="#">Produtos<img class="flechaVertical" alt="Flecha" src="img/flecha.png"></a>
      <ul>
        <li><a href="#">Brinquedos</a></li>
        <li><a href="#">Casamento</a></li>
        <li><a href="#">Decoração</a></li>
        <li><a href="#">Festa</a></li>
        <li><a href="#">Lembrancinhas</a></li>
      </ul>
    </li>
    <li><a href="#"><img id="navLogo" class="navLogo" alt="Versatyll" src="img/logotipo.png"></a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contatos</a></li>
    <li><a href="#">Dúvidas</a></li>
  </ul>
</nav>
</header>