navegación vertical que muestra un submenú oculto al hacer clic usando JQuery

Estoy tratando de hacer un menú que funcione como el de este sitio flash:

http://elevensix.de/

Cuando hago clic en "cartera", solo entonces los enlaces de subnavegación se revelan. En este momento solo he logrado que funcione una típica vertical "revelar subnavegación en el menú flotante".

Lo que se requiere es que una vez que aparezca el elemento de menú apropiado, se muestre su submenú. Este submenú permanece revelado a medida que los elementos del submenú se ciernen sobre ellos y luego se seleccionan. Cuando se selecciona el elemento del submenú, se muestra el contenido, y tanto el menú como el submenú permanecen visibles (el menú seleccionado y el elemento del submenú tienen un color distinto para mostrar la ruta de navegación). Uf.

Aquí está mi 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-->

y aquí está mi 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;
}

¿Debería darle una clase a los submenús para que pueda ocultarme y luego mostrarlos? ¿Y dónde se aplicaría la clase? A la ul? ¿podría usar la misma clase para ambos submenús? ¿Estoy equivocado en cómo estoy aplicando la pantalla: ninguno de los valores para este propósito?

Muchas gracias a todas las personas inteligentes aquí.

Respuestas a la pregunta(1)

Su respuesta a la pregunta