trasition effect in menu does not work on Chrome firefox works normal

Asked

Viewed 291 times

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 the 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>
css google-chrome transition

  • dvd your solution was brilliant but when I run the code here by stackoverflow kkk page looks at the irony my problem is overflow...well it works properly when I make the changes on my page the white band does not OVERWRITE the figures. :(

  • I adjusted the height and top and it worked...!

1 answer

0


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

When you arrow overflow In the widget, Chrome delimits all child elements to the parent element area. Whatever exceeds the limits, they will not be displayed. Your transition is working properly, but it does not appear because it is outside the boundaries of the parent element.

The only way I could figure this out visually was by creating a new div with white background and height of 10px that will overlap and to hide part of the <li> down from the top. And of course deleting the line overflow of nav > ul.

I created a div and gave id of faixa right after the opening of the div leading:

*{
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>

  • @fabrito Tries to increase the value of z-index. Instead of 9, it puts 99999999 (several nines).

Browser other questions tagged css google-chrome transition

You are not signed in. Login or sign up in order to post.