Eu estava criando um menu responsivo, e u reparei que se eu não colocar os media queries do menor para o maior ele não funciona corretamente.
@media only screen and (min-width:560px) {
.menu li {
width: 132px;
height: 50px;
}
.menu li a {
width: 132px;
height: 50px;
color: red;
position: absolute;
font: bold 18px Arial, Tahoma, Helvetica;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
}
@media only screen and (min-width:960px) {
.menu li {
width: 132px;
height: 50px;
}
.menu li a {
width: 132px;
height: 50px;
color: #fff;
position: absolute;
font: bold 18px Arial, Tahoma, Helvetica;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
}