Open In App

Pure CSS Dropdown

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        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=
        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/



Last Updated : 27 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads