Menu
A menu is a collection of links that provides the user with a navigation guide
Having easy-to-use navigation is important for any web site.
Before teaching menus we need to know how to create a basic structure to help us style it.
Basic structure
We usually use lists, unordenated lists to be more precise, and the items are list items or lis,
this way nesting makes sense
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
<li>SubItem 4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
But this only gives us the structure, let's say our menu will be horizontal, so but lists are displayed vertical, we must add the following line to fix that: li { display: inline-block; } then we must hide the submenus with something like ul ul { display: none; } and it will show whenever we hover a list item that has an ul inside with something like ul li:hover ul, ul:hover { display: block; }
Now we have a menu that has a dropdown menu, but the second one doesn't display as it should, for that it's commonly used the position: absolute;
Following these steps you may have a menu looking this way:
This provided us with the structure, we could now style it so it looks more appealing following what we learned on the other articles
Example
This example is what we could get if we put more time, not ours but as a showcase