CSS DropDowns

22 May 2024 by
Rakesh Chavada

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. 


<!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>

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>

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>

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=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png" 
             width="150" 
             height="50" align="middle">
        <div class="sub-dropmenu">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png" 
                 width="600" 
                 height="200">
        </div>
    </div>
</body>

</html>

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>

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.