I'm looking to create a navigation menu using HTML ul li that displays drop down items in a similar way to www.microsoft.com. For example, when you click on 'Products' on the Microsoft website, it shows a list of products in one dropdown window and a list of Entertainment in another column. How can I achieve this with CSS? Below is my current code:
<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>
When someone clicks on Menu 1 in my case, the Sub Menu 1 should display in a dropdown window with sub menu 1a, 1b, 1c below it. The same pattern should apply for other menu items as well, showing them in multiple columns if necessary. Does anyone have an example CSS to achieve this functionality?