z-index google chrome error

Navigation
0

Google Chrome is with 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, except that firefox and safari works normally , already in google chrome not when I hover the mouse in the product menu to open the sub menu, my whole menu some. I have read related questions and tried to tweak the hierarchy but I did not get anything, does anyone know of any solutions?

Here is the jsfiddle file if you test in firefox and then in chrome you will see the error: link 

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>
    
asked by anonymous 30.06.2016 / 20:39

0 answers

Define array with "ComboBox" data select2 Ionic + AngularJS customize function with $ location