Pure CSS – Vertical Menu

In this tutorial, we will learn about creating the vertical Menu using Pure CSS. We need to use the class “pure-menu-vertical” to create the vertical menu.

As a part of this, we will use the class names “pure-menu-link” for creating the menu link and “pure-menu-item”, “pure-menu-heading” for creating the menu items and headings.

Below is the example to create horizontal menu.


<!DOCTYPE html>



<title>Pure CSS Vertical Menu</title>


<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">




display: inline-block;




    <div class="pure-menu pure-vmenu-width">

        <ul class="pure-menu-list">

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Products</a></li>

        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Pricing</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>

            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Offers</a></li>





Below is the output: