How to design a dropdown menu using pure CSS ? - GeeksforGeeks

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>
Output:
Pure CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript