Jag Panzer
-
Total de itens
1 -
Registro em
-
Última visita
Sobre Jag Panzer
-
[Submenu] Menu horizontal com submenu vertical.
Jag Panzer postou uma questão Perguntas e respostas rápidas
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; }