Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
VERDURAS >
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).
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