How to design a dropdown menu using pure CSS ?

Last Updated : 23 Feb, 2021

The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites.

With the help of Pure CSS, we can easily create such dropdown menus.

Approach: The following points are considered for creating a horizontal menu with dropdown.

All the components of the menu should be enclosed within a division with a class named “pure-menu pure-menu-horizontal“.
Add class “pure-menu-heading” in the <span> element for the main heading or title.
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“.
For creating a dropdown menu for a particular list item, add class “pure-menu-has-children“ inside <li> element. Add class name “pure-menu-allow-hover“ to display the submenu on hover. Add all the items of submenu inside <ul> element with class “pure-menu-children”. Each item should be enclosed within <li> element with class “pure-menu-item“.
If you want to link an item with a section of your webpage you can further enclose it within <a> element with class “pure-menu-link“.

Example: In this example we will create a horizontal menu.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href= 
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity= 
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/> 
  
    <!-- Let browser know website is  
        optimized for mobile -->
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
  </head> 
  
  <body> 
    <div class="pure-menu pure-menu-horizontal"> 
      <!--Main heading of menu-->
      <span class="pure-menu-heading">  
        GEEKFORGEEKS  
      </span> 
  
      <ul class="pure-menu-list"> 
        <!--List items of menu-->
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link"> 
            Home  
          </a> 
        </li> 
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link">  
            About Us  
          </a> 
        </li> 
        <li class="pure-menu-item pure-menu-has-children  
                   pure-menu-allow-hover"> 
          <a href="#" class="pure-menu-link"> 
            Tutorial  
          </a> 
  
          <!--Submenus of Tutorial-->
          <ul class="pure-menu-children"> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">C</a> 
            </li> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">C++</a> 
            </li> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">Java</a> 
            </li> 
          </ul> 
        </li> 
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link"> 
            Privacy Policy  
          </a> 
        </li> 
      </ul> 
    </div> 
  </body> 
</html> 

Output:

For creating a vertical menu with dropdown: For creating such menu remove the class name “pure-menu-horizontal“ from the division at beginning. By default, menu items take 100% of the width of the container, so we must limit the width by setting the display to inline-block.

Example: In this example we will create a vertical menu.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href= 
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity= 
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous" /> 
  
    <!-- Let browser know website is  
        optimized for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  </head> 
  
  <body> 
    <style> 
      .custom-restricted-width { 
        /* To limit the menu width to  
            the content of the menu: */ 
        display: inline-block; 
      } 
    </style> 
  
    <div class="pure-menu custom-restricted-width"> 
      <!--Main heading of menu-->
      <span class="pure-menu-heading"> GEEKFORGEEKS </span> 
  
      <ul class="pure-menu-list"> 
        <!--List items of menu-->
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link"> Home </a> 
        </li> 
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link"> About Us </a> 
        </li> 
        <li class="pure-menu-item pure-menu-has-children 
                   pure-menu-allow-hover"> 
          <a href="#" class="pure-menu-link"> Tutorial </a> 
  
          <!--Submenus of Tutorial-->
          <ul class="pure-menu-children"> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">C</a> 
            </li> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">C++</a> 
            </li> 
            <li class="pure-menu-item"> 
              <a href="#" class="pure-menu-link">Java</a> 
            </li> 
          </ul> 
        </li> 
        <li class="pure-menu-item"> 
          <a href="#" class="pure-menu-link">  
             Privacy Policy 
          </a> 
        </li> 
      </ul> 
    </div> 
  </body> 
</html> 