Pure CSS Dropdown - GeeksforGeeks

27 Sep, 2021
Pure CSS is a CSS framework. It is a free and open-source tool collection for creating responsive websites and web applications. 
Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. 
To create a dropdown menu in Pure.CSS, we use class pure-menu-has-children and pure-menu-allow-hover. This class allows us to convert any element into a dropdown item.
Syntax:
<div class="pure-menu-has-children pure-menu-allow-hover"></div>
 
Example 1: The following example shows a simple dropdown menu and a drop-down with different background colors created by using the background-color property of CSS.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css"        integrity="sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"        crossorigin="anonymous"></head>  <body>    <center>        <h2 style="color:green;">            GeeksforGeeks        </h2>    </center>      <div class="pure-menu pure-menu-horizontal">        <ul class="pure-menu-list">            <li class="pure-menu-item pure-menu-selected">                <a href="#" class="pure-menu-link">Home</a>            </li>            <li class="pure-menu-item pure-menu-has-children                        pure-menu-allow-hover">                <a href="#" class="pure-menu-link">Courses</a>                <ul class="pure-menu-children">                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            Placement 100</a>                    </li>                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            Complete Interview Preparation</a>                    </li>                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            Android Bootcamp</a>                    </li>                </ul>            </li>            <li class="pure-menu-item pure-menu-has-children                    pure-menu-allow-hover"                     style="background-color: green;">                  <a href="#" class="pure-menu-link"                     style="color:white;">                    Contact US                </a>                                  <ul class="pure-menu-children">                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            At Office                        </a>                    </li>                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            At Headquarter                        </a>                    </li>                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            Via mail                        </a>                    </li>                </ul>            </li>        </ul>    </div></body>  </html>
Output:
Pure CSS
Example 2: We can create a nested dropdown by nesting dropdown components inside each other.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css"        integrity="sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"        crossorigin="anonymous"></head>  <body>    <center>        <h2 style="color:green;">            GeeksforGeeks        </h2>    </center>      <div class="pure-menu pure-menu-horizontal">        <ul class="pure-menu-list">            <li class="pure-menu-item pure-menu-selected">                <a href="#" class="pure-menu-link">Home</a>            </li>            <li class="pure-menu-item pure-menu-has-children                        pure-menu-allow-hover">                <a href="#" class="pure-menu-link">Courses</a>                <ul class="pure-menu-children">                    <li class="pure-menu-item">                        <a href="#" class="pure-menu-link">                            Placement 100</a>                    </li>                    <li class="pure-menu-item" disabled>                        <a href="#" class="pure-menu-link">                            Complete Interview Preparation</a>                    </li>                    <li class="pure-menu-item" active>                        <a href="#" class="pure-menu-link">                            Android Bootcamp</a>                    </li>                    <li class="pure-menu-item                                 pure-menu-has-children                                 pure-menu-allow-hover">                        <a href="#" class="pure-menu-link">                            Contact US                        </a>                        <ul class="pure-menu-children">                            <li class="pure-menu-item">                                <a href="#"                                     class="pure-menu-link">                                    At Office                                </a>                            </li>                            <li class="pure-menu-item">                                <a href="#"                                     class="pure-menu-link">                                    At Headquarter                                </a>                            </li>                            <li class="pure-menu-item">                                <a href="#"                                     class="pure-menu-link">                                    Via mail                                </a>                            </li>                        </ul>                    </li>                </ul>            </li>        </ul>    </div></body>  </html>
Output:
Reference: https://purecss.io/menus/
CSS-Questions
Picked
Pure CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript