menu css com DROPDOWN e submenu EXPANSÍVEL

[RafaelLeggiero 1]

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.

 

[rikaschmitt 54]

Caralho, pra que tanto post ? HAHAHA

[thyquevedo 6]

Tente esse Rafael: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

 

Abraço.

[r.vinicius 0]

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.