Pesquisar na Comunidade
Mostrando resultados para as tags ''submenu''.
Encontrado 1 registro
-
Sistema de Menus/Sub-Menus. Crie um Arquivo Bloco de Notas/Notepad++ Salve como index.html E Cole o Seguinte Codico: <!DOCTYPE html> <html> <head> <style> body, .menu, .sub-menu { margin: 0; padding: 0; } .clearfix:after{ content: '.'; display: block; clear: both; height: 0; line-height: 0; font-size: 0; visibility: hidden; overflow: hidden; } .menu, .sub-menu { list-style: none; background: #000; } .sub-menu { background: #444; } .menu a { text-decoration: none; display: block; padding: 10px; color: #fff; font-family: sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 700; } .menu li { position: relative; } .menu > li { float: left; } .menu > li:hover { background: #444; } .menu li:hover > .sub-menu { display: block; } .sub-menu { display: none; position: absolute; min-width: 150px; } .sub-menu li:hover { background: #555; } .sub-menu .sub-menu { top: 0; left: 100%; } </style> </head> <body> <div class="menu-container"> <ul class="menu clearfix"> <li><a href="#">Item</a> <!-- Nível 1 --> <!-- submenu --> <ul class="sub-menu clearfix"> <li><a href="#">Sub</a> <!-- Nível 2 --> <!-- Importante @Symz --> <ul class="sub-menu"> <li><a href="#">Sub Sub</a> <!-- Importante @Symz --> <!-- Importante @Symz --> <ul class="sub-menu"> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> </ul><!-- Importante @Symz --> </li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> <li><a href="#">Sub Sub</a></li> </ul><!-- Importante @Symz --> </li> <li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li> <li><a href="#">Sub</a></li> </ul><!-- Importante @Symz --> </li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </body> </html> CODICO FEITO POR MIM!
