Aiuto nella programmazione, risposte alle domande / html / CSS per la navigazione: html, css, css-float

CSS per la navigazione: html, css, css-float

Ho un requisito di navigazione basato su HTML ul li. Come posso visualizzare il menu a discesa in modo simile a quando appare su www.microsoft.com. Per: ex se andiamo a www.microsoft.com e clicchiamo su prodotti mostra l'elenco dei prodotti nella stessa finestra a discesa e l'elenco di Intrattenimento in un'altra colonna. Come possiamo creare un css per questo? Questo è quello che ho

<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>

Quindi nel mio caso quando qualcuno fa clic su Menu 1dovrebbe mostrare il sottomenu 1 nella finestra a tendina e mostrare sotto il sottomenu 1a, 1b, 1c e quindi mostrare il sottomenu 2 e mostrare il sottomenu 2a, 2b, 2c sotto di esso ... E se c'è un lungo elenco di menu articoli dovrebbe mostrarlo in più colonne .. Qualcuno ha un css di esempio che realizza questo requisito?