menu css com submenu expansível

[RafaelLeggiero 1]

Boa tarde galera,

estou montando um site e tentando fazer o seguinte efeito no menu dele:

Um menu horizontal simples que áo passar o mouse sobre produtos cria um dropdown onde ele me mostra as

"categorias" de produtos. O efeito que eu quero criar é no proximo passo que seria áo clicar ou mesmo passar o mouse em cima

do texto (categoria) ele expanda para baixo dele mostrando os links dos produtos por ex:

 

inicio - produtos - contato

 

áo posicionar em cima de produtos

um dropdown

 

- produtos > FRUTAS >

VERDURAS >

 

[Gabrielsooco 0]

Seje um bom webmaster. an¨¢lise e edite seu codigo, como quiser!

 

 

www.linhadecodigo.com.br/artigo/3464/criando-um-menu-vertical-dropdown-com-css-e-html.aspx

[L. Henrique 179]

Poste o seu código atual pra facilitar a publicação das respostas.

O HTML:

<nav id="nav">
     <ul>
          <li><a href="#">início</a></li>
          <li><a href="#">produtos</a>
          <ul>
               <li><a href="#">frutas</a></li>
               <li><a href="#">verduras</a></li>
          </ul>
     </ul>
</nav>

O CSS:

#nav{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 1.5em 0 1.5em 0;
z-index: 1;
overflow: hidden;
}

#nav > ul{
line-height: 0px;
position: relative;
display: inline-block;
margin: 0;
height: 21px;
}

#nav > ul:before, #nav > ul:after{
content: '';
display: block;
width: 300%;
position: absolute;
top: 50%;
margin-top: -2px;
height: 5px;
}

#nav > ul:before{
left: 100%;
margin-left: 1px;
}

#nav > ul:after{
right: 100%;
margin-right: 1px;
}

#nav > ul > li{
display: inline-block;
margin: -9px 0.5em 0 0.5em;
padding: 0.85em;
}

#nav > ul > li.active{
border-color: rgba(192,192,192,0.35);
}

#nav > ul > li > a, #nav > ul > li > span{
display: block;
color: inherit;
text-decoration: none;
border: 0;
outline: 0;
}

#nav > ul > li > ul{
display: none;
}

Creio que você deve estar iniciando nessa área, portanto aconselho que busque por BOOTSTRAP (realmente facilita a vida de qualquer um).