Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá camaradas estou desenvolvendo um menu com submenu, o problema é que o submenu fica horizontalmente, atualmente estou usando apenas o HTML e o CSS, vou colocar ambos aqui:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TesT</title>
<link rel="stylesheet" href="testilo.css">
</head>
<body>
<h1>Teste 2</h1>
<h1> Desenvolvendo Menu</h1>
<img src="cabala2.jpg" alt="Árvore" width="120" height="120" id="imgpos">
<br> <hr> <br>
<nav id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<div class="dropdown">
<button class="dropbtn">
<li><a href="meses.html">Mêses</a></li>
</button>
<div class="dropdown-content">
<ul >
<li><a href="#nissan">Nissan</a></li>
<li><a href="#iyar">Iyar</a></li>
<li><a href="#sivan">Sivan</a></li>
<li><a href="#tamuz">Tamuz</a></li>
<li><a href="#av">Av</a></li>
<li><a href="#elul">Elul</a></li>
<li><a href="#tshrei">Tishrei</a></li>
<li><a href="#cheshvan">Cheshvan</a></li>
<li><a href="#kislev">Kislêv</a></li>
<li><a href="#tevet">Tevêt</a></li>
<li><a href="#shevat">Shevat</a></li>
<li><a href="#adar">Adar</a></li>
</ul>
</div>
</div>
<li><a href="12tribos.html">As 12 Tribos</a></li>
<li><a href="arvore.html">Árvore da Vida</a></li>
<li><a href="alfabeto.html">Alfabeto Hebraico</a></li>
<li><a href="banco.html">Banco de Mapas</a></li>
</ul>
</nav>
</body>
</html>
Agora vou colocar o CSS:
body{
background-color:rgb(0, 132, 255);
}
nav#titulos h1{
color: white;
font-size: 30px;
margin-top: -2px;
text-align: center;
}
nav#titulos h2{
color: white;
padding: 5px;
font-size: 30px;
text-align: center;
}
.dropbtn{
background-color: darkblue;
}
.dropdow {
float: left;
overflow: hidden;
}
.dropdow .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: darkblue;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(10, 214, 241);
}
.dropdown-content {
display: none ;
position: absolute;
background-color: darkblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgb(10, 214, 241);
z-index: 1;
}
.dropdown-content a {
float: none;
color: darkblue;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color:darkblue;
}
.dropdown:hover .dropdown-content {
display: flex;
justify-content: space-between;
}
hr {
border-color: white;
margin-top: -20px;
}
nav#menu{
display: flex;
overflow: hidden;
margin-top: -10px;
background-color: darkblue;
float: none;
text-align: left;
padding: 0px 0px 10px 0px;
}
nav#menu ul {
margin:-5px 0 ;
padding: 0;
background-color: darkblue;
overflow: hidden;
right: auto;
float: left;
}
nav#menu li{
display: flex;
border: none;
}
nav#menu ul li {
display: inline;
padding: -10px;
}
nav#menu li a {
display: inline-block ;
color: white;
padding:19px 39px;
margin: none ;
text-decoration:none ;
transition: background-color 1s;
}
nav#menu li a:hover {
background-color:rgb(10, 214, 241);
}
nav#menu li.active{
background-color:rgb(10, 214, 241);;
}
h1{
color: white;
text-align: center;
}
p {
color: white;
text-align: center;
}
p{
text-align: center;
}
h2 {
color: gold;
text-align: center;
text-decoration:none;
}
a {
color: gold;
}
#imgpos {
position: absolute;
left: 5px;
top: 10px;
}
nav#menu ul {
width: 100%;
display: table;
}
nav#menu ul li {
display:table-cell;
list-style: none;
}Carregando comentários...