RafaelLeggiero 1 Denunciar post Postado Outubro 30, 2014 Boa tarde pessoal, Estou com um projeto onde quero criar um menu css com um dropdown seguido de uma expansão de links como uma âncora. A ideia seria a seguinte tenho o menu: INICIO - PRODUTOS - CONTATO Ao posicionar o mouse sobre produtos ele me mostra as seguintes opções: PRODUTOS > FRUTAS > VERDURAS > ETC Ao clicar no nome frutas ou mesmo posicionar o mouse em cima ele me da as seguintes opções: PRODUTOS > FRUTAS laranja banana maça > VERDURAS > ETC e quando tirar o mouse ou mesmo clicar novamente no nome frutas ele volta o menu para o seu lugar. Eu vi que é possivel fazer esse efeito utilizando o JS JQUERY, mas gostaria de saber se é possivel fazer esse efeito somente utilizando o css. Abaixo segue o código que estou montando para teste: HTML: <nav class="menu"> <ul> <li><a href="index.html"><b>INICIO</b></a></li> <li><a href="noticias.html"><b>NOTICIAS</b></a></li> <li><a href="#"><b>SOBRE A JNG</b></a> <ul> <li><a href="#">Historia</a></li> <li><a href="#">Certificados</a></li> <li><a href="#">Garantia</a></li> <li><a href="#">Politica de atendimento ao cliente</a></li> </ul> </li> <li><a href="#"><b>PRODUTOS</b></a> <ul> <li><a href="#">teste1</a></li> <li><a href="#">teste2_dropdown</a> <ul> <li><a href="#">teste_dropdownANCORA1</a></li> <li><a href="#">teste_dropdownANCORA2</a></li> </ul></li> </ul></li> <li><a href="#"><b>DOWNLOADS</b></a></li> <li><a href="#"><b>CONTATO</b></a></li> </ul> </nav> CSS: .menu { width: 74.468085106383%; /*840px / 1128px */ float: right; margin-top: 3.6em; list-style:none; } .menu a{ font-size: 1.3em; padding: 2px 4px 2px 4px; } .menu ul { float: right; } .menu li { font-size: 1.2em; margin-left: 2em; margin-top: 2.5em; display: inline-block; position:relative; float: left; } .menu li a { color: #00548C; display:block; } .menu li ul { position:absolute; top:25px; left:0px; background-color:#fff; display:none; border: 1px solid #CFE8F4; } .menu li:hover ul, .menu li.over ul{ display:block; text-align: left; z-index: 3; } .menu li ul li{ font-size: 1.0em; width: 250px; height: 30px; display:block; top: -25px; border: 1px solid #FFF; } .menu li ul li a:hover{ text-decoration: underline; } OBS: o site é responsivo por esse motivo alguns elementos em vez de px esta em EM e mesmo porcentagem. Compartilhar este post Link para o post Compartilhar em outros sites
rikaschmitt 54 Denunciar post Postado Outubro 30, 2014 Caralho, pra que tanto post ? HAHAHA Compartilhar este post Link para o post Compartilhar em outros sites
thyquevedo 6 Denunciar post Postado Outubro 31, 2014 Tente esse Rafael: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly Abraço. Compartilhar este post Link para o post Compartilhar em outros sites
r.vinicius 0 Denunciar post Postado Novembro 1, 2014 Esse artigo explica bem como fazer isso: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx E se você estiver com mais duvidas sobre HTML e CSS, tem um canal incrível no youtube chamado Curso em Vídeo, de uma olhadinha la! As aulas são simplesmente incríveis. Compartilhar este post Link para o post Compartilhar em outros sites