Open In App

CSS DropDowns

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Dropdowns are one of the most important parts of an interactive website. CSS is used to design the drop-down menus. A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is popularly known in HTML world. Nested list (<li>) tags under the <ul> tag used to create drop-down structure. To bring out the effects use CSS for the components present in the structure. The CSS is very straightforward property used to create the drop-down menu.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Dropdown property</title>
</head>
 
<body>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
 
</html>


Output:

dropdown menu

Example: Adding CSS property in HTML structure to create interactive drop-down structure.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Navigation property</title>
    <style>
        a {
            color: white;
            background-color: #990;
            text-decoration: none;
        }
 
        nav {
            background: #333;
        }
 
        nav>ul {
            margin: 0 auto;
            width: 80px;
        }
 
        nav ul li {
            display: block;
            float: left;
            margin-left: -40px;
            position: relative;
        }
 
        nav ul a {
            display: block;
            float: left;
            width: 150px;
            padding: 10px 20px;
        }
 
        nav ul a:hover {
            background: #090;
        }
 
        nav ul li ul li {
            float: none;
        }
 
        nav ul li ul {
            display: none;
            position: absolute;
            background: #333;
            top: 42px;
        }
 
        nav ul li:hover>ul {
            display: block;
        }
 
        nav ul li a {
            display: block;
        }
 
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }
 
        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Dropdown Navigation property</p>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
 
</html>


Output:

navigation

The above-written code produces a proper output on the basis of a drop-down structure. Important parts of HTML code are discussed below:

  • nav is the outermost container
  • nav ul li ul li – float is set to none so that it remains intact when we hover over it.
  • Use relative position so that li moves or changes its position relative to its component.
  • Use ‘>’ after hover to see the effect of hover on the immediate next ul of the li.

Right-aligned Dropdown:

The right-aligned dropdown is a dropdown the float value is right to display drop-down content on the right screen. Add float right to the div which holds the content.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>right-aligned dropdown content property</title>
    <style>
        #drop {
            background-color: teal;
            color: white;
            padding: 10px;
            font-size: 16px;
            width: : 200px;
            height: : 60px;
            border-radius: 5px;
            font-size: 20px;
        }
 
        #drop-down {
            position: relative;
            display: inline-block;
        }
 
        #dropdown-menu {
            display: none;
            position: absolute;
            background-color: #666;
            width: 160px;
            margin-left: -45px;
            border-radius: 5px;
            z-index: 1;
        }
 
        #dropdown-menu a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
 
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }
 
        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
 
        #dropdown-menu a:hover {
            background-color: #ddd;
        }
 
        #drop-down:hover #dropdown-menu {
            display: block;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Right-aligned Dropdown content property</p>
    <div id="drop-down"
         style=" float: right;
                 margin-right: 70px;">
        <button id="drop">DropDown</button>
        <div id="dropdown-menu">
            <a href="">Item 1</a>
            <a href="">Item 2</a>
            <a href="">Item 3</a>
            <a href="">Item 4</a>
        </div>
    </div>
</body>
 
</html>


Output:

right aligned dropdown

Image Dropdown:

It is not a dropdown but enlarges the image on which you hover. Needs basic CSS and an image to make it work.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Image Dropdown</title>
    <style>
        .dropmenu {
            position: relative;
            display: inline-block;
            margin-left: 150px;
        }
 
        .sub-dropmenu {
            display: none;
            position: absolute;
        }
 
        .dropmenu:hover .sub-dropmenu {
            display: block;
        }
 
        .enlarge {
            padding: 15px;
            text-align: center;
        }
 
        .gfg {
            margin-left: 40px;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="gfg">Image Dropdown property</div>
    <div class="dropmenu">
        <img src=
             width="150"
             height="50" align="middle">
        <div class="sub-dropmenu">
            <img src=
                 width="600"
                 height="200">
        </div>
    </div>
</body>
 
</html>


Output:

image dropdown

Clicked Drop-downs:

This requires a basic understanding of JavaScript as it is used to run some functions to make the clicked drop-down work.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>clicked dropdown</title>
    <style type="text/css">
        button {
            background: #009900;
            width: 200px;
            height: 60px;
            color: white;
            border: 1px solid #fff;
            font-size: 20px;
            border-radius: 5px;
 
        }
 
        ul li {
            list-style: none;
        }
 
        ul li a {
            display: block;
            background: #c99;
            width: 200px;
            height: 50px;
            text-decoration: none;
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            color: white;
            font-size: 25px;
        }
 
        ul li a {
            text-decoration: none;
        }
 
        ul li a:hover {
            background: #009900;
        }
 
        .open {
            display: none;
        }
 
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }
 
        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function open_menu() {
            let clicked = document.getElementById('drop-menu');
            if (clicked.style.display == 'block') {
                clicked.style.display = 'none';
            }
            else {
                clicked.style.display = 'block';
            }
        }
    </script>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Clicked Dropdown content property</p>
    <div id="dropdown">
        <button onclick="open_menu()">Click Me!</button>
        <div class="open" id="drop-menu">
            <ul>
                <li><a href="">Item-1</a></li>
                <li><a href="">Item-2</a></li>
                <li><a href="">Item-3</a></li>
                <li><a href="">Item-4</a></li>
            </ul>
        </div>
    </div>
</body>
 
</html>


Output:

clicked dropdown

Note: Some important highlights of the code:

  • The javascript function will expand and collapse the menu when the button “Click Me” is clicked.
  • We use onclick to call the javascript function in the button tag.


Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads