Pure CSS Vertical Menu with Submenus

Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Vertical Menu with Submenus is as similar as nested vertical menu.

Pure CSS Vertical Menu Classes:

• pure-menu-heading: It is the class that is added for the headings inside or outside the menu list. By default, it capitalizes the text inside.
• pure-menu-list: It is the class for the unordered list that contains the menu items. The list items inside this list must have the class "pure-menu-item".
• pure-menu-link: It is the class that is added to the links inside the menu items.
• pure-menu-allow-hover: It is the class to display the submenu on hover.
• pure-menu-has-children: It is the class to mention menu having some submenus.
• pure-menu-children: It is the class to mention submenus.

Syntax:

<li class="pure-menu-item 
 pure-menu-has-children
 pure-menu-allow-hover"> 
 <a href="#" class="pure-menu-link">...</a>
 <ul class="pure-menu-children">
 <li class="pure-menu-item">
 <a href="#" class="pure-menu-link">...</a>
 </li>
 <li class="pure-menu-item">
 <a href="#" class="pure-menu-link">..</a>
 </li> 
 </ul>
</li>

Example 1: In this example, we will create Vertical Menu with a single Submenu.

Output:

👁 Pure CSS Vertical Menu with Submenus

Example 2: In this example, we will create demonstrate Vertical Menu with nested Submenu.

 Output:   

👁 Pure CSS Vertical Menu with Submenus

Example 3: In this example, we will create demonstrate Vertical Menu with multiple Submenus. 

 Output:    

👁 Pure CSS Vertical Menu with Submenus

Example 4: In this example, we will create demonstrate Vertical Menu with Multiple Submenus and nested Submenu.

Output:      

Reference: https://pure-css.github.io/