menu css com DROPDOWN e submenu EXPANSÍVEL

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.