$(function() { // Evento de clique do elemento: ul#menu li.parent > a $('ul#menu li.parent > a').click(function() { // Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent) $('ul.sub-menu', $(this).parent()).slideToggle('fast', function() { // Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado $(this).parent().toggleClass('aberto'); }); return false; }); });
<h1><a href="http://www.wmonline.com.br">Webmasters Online</a></h1> <ul id="menu"> <li class="header">Menu</li> <li><a href="#" title="">Página inicial</a></li> <li><a href="#" title="">Notícias</a></li> <li class="parent"><a href="#" title="">Produtos</a> <ul class="sub-menu"> <li><a href="#" title="">Camisetas</a></li> <li><a href="#" title="">Calças</a></li> <li><a href="#" title="">Livros</a></li> </ul> </li> <li><a href="#" title="">Quem somos nós</a></li> <li><a href="#" title="">Contato</a></li> </ul>
* { margin: 0px; padding: 0px; } body { font-family: Verdana, Arial, sans-serif; font-size: 11px; margin: 20px; } ul { list-style: none; } ul#menu { width: 170px; border: 1px solid silver; margin-top: 20px; } ul#menu li { color: black; line-height: 19px; background: #F4F4F4; } ul#menu li.header { background: #DFDFDF; font-weight: bolder; padding: 0px 3px; font-size: 12px; } ul#menu li a { color: black; text-decoration: none; display: block; padding: 0px 3px; outline: none; } ul#menu li.parent > a { background: transparent url('../img/down.gif') right center no-repeat; } ul#menu li.aberto > a { background: transparent url('../img/up.gif') right center no-repeat; } ul#menu li a:hover { background-color: #EAEEFF; } ul#menu li ul.sub-menu { display: none; } ul#menu li ul.sub-menu li a { padding-left: 15px; color: maroon; }