menu trasfer effect does not work in chrome in firefox works normal

Navigation
0

This is the CSS code: 

*{
margin:0;
padding:0;  
}
header{
margin-top:10px;


}
nav{

margin:0px auto;
max-width:1000px;
width:100%;

}
nav ul {
list-style:none;
}

nav > ul {
display:table;
overflow:hidden;
width:100%;
background:#E8E8E8;
position:relative;

}

nav > ul li {
display:table-cell;

}
/* Sub-menu*/
nav > ul > li:hover > ul{
display:inline;
height:100%;
}

nav > ul > li > ul {
display:block;
position:absolute;
background:#CDCDC1;
left:0;
right:0;
overflow:hidden;
height:0%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}

nav > ul li a {
color:#000;
display:block;
line-height:20px;
padding:20px;
position:relative;
text-align:center;
text-decoration:none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul >li a:hover{
background:#87CEFF;
}

nav > ul > li > a span{
background:#174459;
display:block;
height:100%;
width:100%;
left:0;
position:absolute;
top:-55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display:block;
line-height:80px;
}
nav > ul > li > a:hover > span {
top:0;
}
/* Cores*/
nav ul li a .primeiro{
background:#00BFFF;
}
nav ul li a .segundo{
background:#00BFFF;
}
nav ul li a .terceiro{
background:#00BFFF;
}
nav ul li a .quarto{
background:#00BFFF;
}
nav ul li a .quinto{
background:#00BFFF;
}
nav ul li a .sexto{
background:#00BFFF;
}

This is HTML: 

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
   <meta charset="UTF-8">
   <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
   <link rel="stylesheet" href="css/estilo_menu5.css">  
</head>
<body>  
<div> 
   <header>
      <nav>
         <ul>
            <li><a href="#"><span class="primeiro"><i class="icon"><img src="img/House.png" width="30" height="30"/></i></span>Escola</a>
               <ul>
                  <li><a href="#">Cadastro</a></li>
                  <li><a href="#">Coordenação Pedagógica</a></li>
                  <li><a href="#">LSE</a></li>
                  <li><a href="#">Relatórios</a></li>
                  <li><a href="#">Usuários</a></li>
               </ul>
               </li>
               <li><a href="#"><span class="segundo"><i class="icon"><img src="img/Schoolbag.png" width="30" height="30" /></i></span></i>Aluno</a>
               <ul>
                  <li><a href="#">Pesquisar Aluno</a></li>
                  <li><a href="#">Relatórios</a></li>
               </ul>
            </li>
            <li><a href="#"><span class="terceiro"><i class="icon"><img src="img/People.png" width="30" height="30"/></i></span>Turmas</a>
               <ul>
                  <li><a href="#">Cadastrar Turma</a></li>
                  <li><a href="#">Listar Turma</a></li>
               </ul>
            </li>
            <li><a href="#"><span class="quarto"><i class="icon"><img src="img/Arithmetic.png" width="30" height="30" /></i></span>Professor</a>
               <ul>
                  <li><a href="#">Carga Horária</a></li>
                  <li><a href="#">Enturmar Professor</a></li>
               </ul>
            </li>
            <li><a href="penn.html"><span class="quinto"><i class="icon"><img src="img/Delete.png" width="30" height="30" /></i></span>Pendência</a></li>
            <li><a href="DOWNN.html#"><span class="sexto"><i class="icon"><img src="img/Down.png" width="30" height="30" /></i></span>Download</a></li>
         </ul>
      </nav>
   </div>
</header>
</body>
</html>
    
asked by anonymous 11.01.2018 / 01:59

1 answer

0

The problem is in overflow:hidden; in nav > ul . Chrome, unlike other browsers, interprets this differently.

When you right-click% in the element, Chrome delimits all child elements in the parent element area. What goes beyond the limits, will not be displayed. Your transition is working properly, but it does not appear because it is outside the parent element boundaries.

The only way I found to solve this in a visual way was to create a new% color with white background and% height of% that will overwrite and hide part of the overflow that descend from the top. And, of course, deleting the line div from 10px .

I created a <li> and gave overflow of nav > ul soon after opening div principal: 

*{
margin:0;
padding:0;  
}
header{
margin-top:10px;
}
nav{

margin:0px auto;
max-width:1000px;
width:100%;

}
nav ul {
list-style:none;
}

nav > ul {
display:table;
width:100%;
background:#E8E8E8;
position:relative;

}

nav > ul li {
display:table-cell;

}
/* Sub-menu*/
nav > ul > li:hover > ul{
display:inline;
height:100%;
}

nav > ul > li > ul {
display:block;
position:absolute;
background:#CDCDC1;
left:0;
right:0;
overflow:hidden;
height:0%;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}

nav > ul li a {
color:#000;
display:block;
line-height:20px;
padding:20px;
position:relative;
text-align:center;
text-decoration:none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul >li a:hover{
background:#87CEFF;
}

nav > ul > li > a span{
background:#174459;
display:block;
height:100%;
width:100%;
left:0;
position:absolute;
top:-55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display:block;
line-height:80px;
}
nav > ul > li > a:hover > span {
top:0;
}
/* Cores*/
nav ul li a .primeiro{
background:#00BFFF;
}
nav ul li a .segundo{
background:#00BFFF;
}
nav ul li a .terceiro{
background:#00BFFF;
}
nav ul li a .quarto{
background:#00BFFF;
}
nav ul li a .quinto{
background:#00BFFF;
}
nav ul li a .sexto{
background:#00BFFF;
}

#faixa{
   display: block;
   width: 100%;
   background: #fff;
   height: 10px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9;
}
<div>
   <div id="faixa"></div>
   <header>
      <nav>
         <ul>
            <li><a href="#"><span class="primeiro"><i class="icon"><img src="img/House.png" width="30" height="30"/></i></span>Escola</a>
               <ul>
                  <li><a href="#">Cadastro</a></li>
                  <li><a href="#">Coordenação Pedagógica</a></li>
                  <li><a href="#">LSE</a></li>
                  <li><a href="#">Relatórios</a></li>
                  <li><a href="#">Usuários</a></li>
               </ul>
               </li>
               <li><a href="#"><span class="segundo"><i class="icon"><img src="img/Schoolbag.png" width="30" height="30" /></i></span></i>Aluno</a>
               <ul>
                  <li><a href="#">Pesquisar Aluno</a></li>
                  <li><a href="#">Relatórios</a></li>
               </ul>
            </li>
            <li><a href="#"><span class="terceiro"><i class="icon"><img src="img/People.png" width="30" height="30"/></i></span>Turmas</a>
               <ul>
                  <li><a href="#">Cadastrar Turma</a></li>
                  <li><a href="#">Listar Turma</a></li>
               </ul>
            </li>
            <li><a href="#"><span class="quarto"><i class="icon"><img src="img/Arithmetic.png" width="30" height="30" /></i></span>Professor</a>
               <ul>
                  <li><a href="#">Carga Horária</a></li>
                  <li><a href="#">Enturmar Professor</a></li>
               </ul>
            </li>
            <li><a href="penn.html"><span class="quinto"><i class="icon"><img src="img/Delete.png" width="30" height="30" /></i></span>Pendência</a></li>
            <li><a href="DOWNN.html#"><span class="sexto"><i class="icon"><img src="img/Down.png" width="30" height="30" /></i></span>Download</a></li>
         </ul>
      </nav>
   </div>
</header>
    
11.01.2018 / 02:58
Send data by modal and keep modal open with a result display json data coming from AJAX request