Design a Vertical and Horizontal menu using Pure CSS

Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header.

1. For Creating Vertical Menu:

   1. Menus are vertical by default in Pure CSS. It is easy to customize because of minimal default styling and low-specificity selectors.
   2. All the components of menu should be enclosed within a division with class named "pure-menu".
   3.  Add class "pure-menu-heading" in the <span> element for the main heading or title.
   4.  Then add all the items after heading inside <ul> element with class “pure-menu-list”. Each item should be enclosed within <li> element with class "pure-menu-item" .
   5.  If you want to link an item with a section of your webpage you can further enclosed it within <a> element with class "pure-menu-link".

   Example:

   Output:

   👁 Image
   

2. For creating Horizontal Menu:

   You can change the above vertical menu to horizontal menu by just adding the class name "pure-menu-horizontal" in the division at the beginning.

   Example:

   Output:

   👁 Image