navegação vertical que mostra o submenu oculto ao clicar usando JQuery
Estou tentando criar um menu que funcione como o deste site em flash:
Quando clico em "portfólio", somente os links de subnavegação se revelam. No momento, apenas consegui obter uma vertical vertical "subnavegação de revelação no menu suspenso" funcionando.
O que é necessário é que, uma vez que o item de menu apropriado seja clicado, seu submenu seja exibido. Este submenu permanece revelado à medida que os itens do submenu são passados sobre o mouse e depois selecionados. Quando o item do submenu é selecionado, o conteúdo é exibido e o menu e o submenu permanecem visíveis (o menu e o item do submenu selecionados recebem uma cor distinta para mostrar o caminho de navegação). Ufa.
Aqui está o meu html:
<div id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">testimonials</a>
<ul>
<li><a href="#">testimonial1</a></li>
<li><a href="#">testimonial2</a></li>
<li><a href="#">testimonial3</a></li>
<li><a href="#">testimonial4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">services1</a></li>
<li><a href="#">services2</a></li>
<li><a href="#">services3</a></li>
<li><a href="#">services4</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #nav-->
e aqui está o meu css:
#nav {
width:160px;
position: relative;
top: 250px;
left: 20px;
}
#nav ul {
margin:0px;
padding:0px;
}
#nav ul li {
line-height:24px;
list-style:none;
}
#nav a {
text-decoration: none;
color: #9d9fa2;
}
#nav ul li a:hover {
position:relative;
color: #00aeef;
}
#nav ul ul {
display:none;
position:absolute;
left:160px;
top:4px;
}
#nav ul li:hover ul {
display:block;
color: #00aeef;
}
#nav ul ul li {
width:160px;
float:left;
display:inline;
line-height:16px;
}
.selected {
color: #00aeef !important;
}
Devo dar uma aula aos submenus para que eu possa me esconder e mostrá-los? E onde a classe seria aplicada? Para o ul? eu poderia usar a mesma classe para ambos os submenus? Estou errado em como estou aplicando a exibição: nenhum valor para esse fim?
Muito obrigado a todas as pessoas inteligentes aqui.