/*-----Menu drop down responsivo ----*/
body {
margin: 0px;
}
#menu{
background:#084B8A ; /* COR DE FUNDO DO MENU */
color: #fff; /*0000*/
height: 40px; /* ALTURA, ALTERE SE DESEJAR */
width: 100%; /* LARGURA, NÃO ALTERE */
z-index: 999;
position: relative;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;width:100%;
}
#menu li{
float:left;
display:inline;
position:relative;
font: normal normal 14px Montserrat; /* TIPO E TAMANHO DE FONTE */
}
#menu a{display: block;
line-height: 40px; /* ALTURA DO MENU */
padding: 0 14px;
text-decoration: none;
color:#ffffff; /* COR DE FONTE DO MENU */
}
#menu li a:hover{
color: #fffFFF; /* COR DE FONTE DO MENU HOVER*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #f2688e; /* COR DE FUNDO DO MENU HOVER*/
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;cursor:pointer;
}
#menu label{
font:23px 'Open Sans'; /* FONTE DO MENU RESPONSIVO */
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center;
}
#menu label span{
font-size:23px;
position:absolute;
left:35px;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #fff;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font: normal normal 14px Montserrat; /* TIPO E TAMANHO DE FONTE DO MENU */
text-transform: uppercase; /* COLOCA A FONTE EM CAPSLOCK, APAGUE SE PREFERIR*/
text-shadow: none;
}
#menu ul.menus a{
color: #000;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #f2688e; /* COR DE FUNDO DO MENU RESPONSIVO HOVER*/
color: #FFFFFF; /* COR DE FONTEDO MENU RESPONSIVO HOVER*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color: #ffffff}
#menu input:checked ~ ul{display:block}
}
Atualizações do Instagram
Subir
