Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pure CSS Dropdown

  • Last Updated : 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=
        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/




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!