Skip to content
Related Articles

Related Articles

Improve Article
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-headingin the <span> element for the main heading or title.
  • Then add all the items after heading inside <ul> element with classpure-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 namepure-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=
          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=
          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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :