Estou com um problema que é o seguinte, coloquei uma barra de menu dropdwon, so que ela não aparece toda so um parte…
irei compartilha o código HTML5 e o CSS3
Code html5:
Atari Mania ☰code css3
- { margin: 0; padding: 0;}
.menu { width: 100%; height: 50px; background-color: #222; font-family: ‘Arial’;}
.menu ul {list-style: none; position: relative;}
.menu ul li {width: 150px; float: left;}
.menu a { padding: 15px; display: block; text-decoration: none; text-align: center; background-color: #222; color: #ffffff; }
.menu ul ul { position: absolute; visibility: hidden;}
.menu ul li:hover ul {visibility: visible;}
.menu a:hover {background-color: #f1000c;}
.menu ul ul li{ float: none; border-bottom: 1px solid #ccc;}
.menu ul ul li a { background-color: rgb(54, 50, 50)}
label[for=“bt_menu”]{ padding: 5px; background-color: #222; color: #fff; font-family:“Arial”; text-align: center;font-size: 30px;cursor: pointer; width: 50px; height: 50px;}
#bt_menu {display: none;}
label[for=“bt_menu”]{display: none;}
@media( max-widht: 800px){
label[for=“bt_menu”]{ display: block;}
#bt_menu:checked ~ .menu{
margin-inline-start: 0;
}
.menu ul li { width: 100%; float: none;}
.menu {
margin-top: 5px;
margin-left: -100%;
transition: all .4s;
}
.menu ul ul {
position: static;
overflow: hidden;
max-height: 0;
transition: all .4s;
}
.menu ul li:hover ul{
height: auto;
max-height: 200px;
}
}
espero uma ajuda urgente