CSS für die Navigation - html, css, css-float

Ich habe eine HTML ul li basierte Navigationsanforderung. Wie kann ich die Drop-Down-Funktion so anzeigen lassen, wie sie aussieht, wenn wir auf www.microsoft.com gehen? Für: ex, wenn wir zu www.microsoft.com gehen und auf Produkte klicken, zeigt es die Liste der Produkte im selben Dropdown-Fenster und die Liste der Unterhaltung in einer anderen Spalte an. Wie können wir ein CSS dafür erstellen? Das habe ich

<ul>
<li>
<a href="link" target="">Home</a>
</li>
<li>
<a href="link" target="">Menu 1</a>
<ul>
<li>
<a href="link" target="">Sub Menu 1</a>
<ul>
<li>
<a href="link" target="">sub Menu 1a </a>
</li>

<li>
<a href="link" target="">sub Menu 1b </a>
</li>

<li>
<a href="link" target="">sub Menu 1c </a>
</li>
</ul>
</li>

<li>
<a href="link" target="">Sub Menu 2</a>
<ul>
<li>
<a href="link" target="">sub Menu 2a </a>
</li>

<li>
<a href="link" target="">sub Menu 2b </a>
</li>

<li>
<a href="link" target="">sub Menu 2c </a>
</li>
</ul>
</li>

<li>
<a href="link" target="">Sub Menu 3</a>
<ul>
<li>
<a href="link" target="">sub Menu 3a </a>
</li>

<li>
<a href="link" target="">sub Menu 3b </a>
</li>

<li>
<a href="link" target="">sub Menu 3c </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="link" target="">Menu 2</a>
<ul>
<li> <a href="linl" > sub Menu 1 </a> </li>
<li>  <a href="link2"> sub Menu 2 </a> </li>
</ul>
</li>

</ul>

Also in meinem Fall, wenn jemand auf Menu 1 klicktsollte das Untermenü 1 im Dropdown-Menü anzeigen und das Untermenü 1a, 1b, 1c darunter anzeigen und dann das Untermenü 2 anzeigen und darunter das Untermenü 2a, 2b, 2c anzeigen ... und wenn es eine lange Liste von Menüs gibt Items sollte es in mehreren Spalten zeigen .. Irgendwelche haben ein Beispiel css, die diese Anforderung erfüllen?

Antworten:

Es gibt viele Beispiele, die nur durch Googlen "CSS Dropdown-Menü" verfügbar sind.

Einer der bekanntesten (und derjenige, den ich immer benutzt habe) war dieser: http://www.htmldog.com/articles/suckerfish/dropdowns/