Pure CSS Horizontal Menu

We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars (navbars). 

We will use the following classes to help us achieve the goal at hand:

• pure-menu: This helps us create a menu. (creates a vertical menu by default)
• pure-menu-horizontal: This helps us create a horizontal menu.
• pure-menu-list: This helps us specify the list which contains the menu items.
• pure-menu-item: This helps us specify that a particular item belongs in the list
• pure-menu-link: This helps us specify the links in the menu items
• pure-menu-heading: This helps us specify a heading for our menu

Syntax:

<div class="pure-menu pure-menu-horizontal">
 <ul class="pure-menu-list">
 <li class="pure-menu-heading">...</li>
 <li class="pure-menu-item">
 <a href="#" class="pure-menu-link">
 ...
 </a>
 </li>
 </ul>
</div>

Note: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework

Example: Let us suppose we want to create a horizontal menu for the nav bar of our portfolio. 

Output: