Tengo dos div uno con fondo amarillo y otro con fondo rojo, el fondo rojo se debe de ver en una resolucion mayor a 800px y el amarillo en la resolucion menor o igual a 800px, el div rojo funciona bien pero el amarillo no se visualiza al momento de verlo en un celular o acortar el ancho del navegador estoy usando mozilla firefox
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (max-width:800px)
{
.menu1
{
display:block;
}
.menu2
{
display:none;
}
}
</style>
</head>
<body>
<div class='menu1' style='display:none;background:#FFFF00'>
menu_celular
</div>
<div class='menu2' style='background:#FF0000'>
menu_pc
</div>
</body>
</html>