vertikale Navigation mit verstecktem Untermenü beim Klicken mit JQuery

Ich versuche, ein Menü zu erstellen, das wie das auf dieser Flash-Site funktioniert:

http: //elevensix.de

Wenn ich auf "Portfolio" klicke, zeigen sich erst dann die Subnavigationslinks. Im Moment ist es mir nur gelungen, eine typische vertikale "Subnavigation im Hover-Menü aufdecken" zum Laufen zu bringen.

Was ist erforderlich, wenn der entsprechende Menüpunkt angeklickt wurde, wird sein Untermenü angezeigt. Dieses Untermenü bleibt sichtbar, wenn Sie den Mauszeiger über die ausgewählten Untermenüpunkte bewegen. Wenn das Untermenüelement ausgewählt ist, wird der Inhalt angezeigt und sowohl das Menü als auch das Untermenü bleiben sichtbar (das ausgewählte Menü und das Untermenüelement erhalten eine unterschiedliche Farbe, um den Navigationspfad anzuzeigen). Wütend

Hier ist mein 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-->

Und hier ist meine 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;
}

Sollte ich den Untermenüs eine Klasse geben, damit ich sie ausblenden und dann anzeigen kann? Und wo würde die Klasse angewendet werden? In die ul? Kann ich für beide Untermenüs dieselbe Klasse verwenden? Irre ich mich bei der anwendung der anzeige: keine werte für diesen zweck?

ielen Dank an alle klugen Leute hie

Antworten auf die Frage(2)

Ihre Antwort auf die Frage