Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no computador, o que deve-se fazer pra forçar-lo a se adaptar?
segue codigo:
<!--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu RESPONSIVO</title>
<!---<link rel="stylesheet" href="style.css">-->
</head>
<style>
*{
margin: 0;
padding: 0;
}
.menu{
width: 100%;
height: 50px;
background-color: #f0f0f0;
font-family:'Arial';
}
.menu ul{
list-style:none;
position: relative;
}
.menu ul li{
width: 150px;
float: left;
}
.menu ul ul{
position: absolute;
visibility: hidden;
}
.menu ul li:hover ul{
visibility: visible;
display:block;
}
.menu a{
text-decoration: none;
display: block;
padding: 15px;
text-align: center;
background-color: #f6f6f6;
color: #000;
}
.menu a:hover{
background-color: #f4f4f4;
}
.menu ul ul li{
float: none;
border-bottom: 1px solid #000;
}
.menu ul ul li a{
background-color: #f0f0f0;
}
label[for="bt_menu"]{
padding: 5px;
background-color: #d0d0d0;
font-family: 'Arial';
text-align: center;
font-size: 30px;
width: 50px;
height: 50px;
}
#bt_menu{
display: none ;
}
label[for="bt_menu"]{
display: none;
}
@media (max-width: 800px){
label[for="bt_menu"]{
display:block;
margin-left: 0;
}
#bt_menu:checked ~ .menu{
margin-left: 0;
display: block;
}
.menu{
margin-top:5px;
margin-left: -100%;
transition: all .4s
}
.menu ul li{
width:100%;
float: none;
}
.menu ul ul{
position:static;
overflow: hidden;
max-height: 0;
transition: all 2s;
}
.menu ul li:hover ul{
height:auto;
max-height: 200px;
}
}
</style>
<body>
<input type="checkbox" id="bt_menu">
<label for="bt_menu">☰</label>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a>
<ul>
<li><a href="#">Criação de Sites</a></li>
<li><a href="#">Artes Visuais</a></li>
</ul>
</li>
<li><a href="#">Cursos</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML/CSS</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>
--->
EdPaulino alterou sua foto pessoal