У меня есть требование навигации на основе HTML ul li. Как я могу получить раскрывающийся список, похожий на то, как он выглядит, когда мы заходим на www.microsoft.com. Например: если мы зайдем на сайт www.microsoft.com и нажмем на продукты, список продуктов отобразится в том же раскрывающемся окне, а список развлечений - в другом столбце. Как мы можем создать CSS для этого? Это то, что у меня есть
<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>
Так что в моем случае, когда кто-то нажимает на Меню 1, оно должно показать Подменю 1 в раскрывающемся окне и показать подменю 1a, 1b, 1c под ним, а затем показать Подменю 2 и показать подменю 2a, 2b, 2c. под ним ... И если есть длинный список пунктов меню, он должен отображаться в нескольких столбцах. У кого-нибудь есть пример css, который выполняет это требование?