CSS Style Dropdowns

Basic Dropdown

The development of a dropdown box that displays when the user hovers over an element is demonstrated in the simple dropdown example. CSS is used for style, and HTML is used for the dropdown menu in the structure.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.dropdown {
            position: relative;
            display: inline-block;
        }

.dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

.dropdown:hover .dropdown-content {
            display: block;
        }
</style>
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }

.childClass {
            top: 0;
            left: 0;
            opacity: 0.7;
            width: 200px;
            height: 150px;
            background: yellow;
            position: absolute;
        }
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass">
<h2>Element 2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>

Output:

Example 3:

In this example, two child elements are stacked on top of the parent element. Each child has its own position settings.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }

.childClass {
            opacity: 0.8;
            height: 150px;
            width: 190px;
            background: yellow;
            position: absolute;
            top: 0;
        }

.child1 {
            left: 0;
        }

.child2 {
            left: 155px;
        }
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass child1">
<h2>Element 1.1</h2>
<p>position: absolute;</p>
</div>
<div class="childClass child2">
<h2>Element 1.2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>

Output:

Dropdown Menu

The dropdown menu example expands on the basic dropdown, incorporating links inside the dropdown box. It covers styling the dropdown button, links, and the overall hover effect.

Example:

Styling the Dropdown Button and Content:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        /* Style The Dropdown Button */
.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* The container <div> - needed to position the dropdown content */
.dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Content (Hidden by Default) */
.dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
.dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change the color of dropdown links on hover */
.dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>

Output:

Right-aligned Dropdown Content:

.dropdown-content {
    right: 0;
}

Dropdown Styling Techniques

This section delves deeper into CSS styling techniques for dropdowns and provides additional examples to showcase the versatility of dropdown designs.

Example 1:

Styling the Appearance of the Dropdown Box:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        select {
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            width: 100%;
            height: 100%;
            color: black;
            cursor: pointer;
            border: 1px solid black;
            border-radius: 3px;
        }

.select {
            position: relative;
            display: block;
            width: 15em;
            height: 2em;
            line-height: 3;
            overflow: hidden;
            border-radius: .25em;
            padding-bottom: 10px;
        }
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>

Output:

Example 2:

Browser-Specific Styling and Transitions:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        h1 {
            color: green;
        }

        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            border: 1px solid black;
        }

.select {
            position: relative;
            display: block;
            width: 20em;
            height: 3em;
            line-height: 3;
            background: #2C3E50;
            overflow: hidden;
            border-radius: .25em;
        }

        select {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0 0 0 .5em;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.25s ease;
        }

select::-ms-expand {
            display: none;
        }

.select::after {
            content: '\25BC';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 0 1em;
            background: #34495E;
            pointer-events: none;
            transition: color 0.25s ease;
        }

.select:hover::after {
            color: #F39C12;
        }
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>

Output:

Conclusion

Web developers must be proficient in CSS dropdown style. You may create a more complicated dropdown menu or a simple dropdown with the same ease of use and elegance thanks to the visual customization options.

Developers can use the offered examples as a starting point to explore and be creative with dropdown design. As CSS remains a foundational technology in web development, mastering these styling techniques contributes to creating engaging and user-friendly interfaces.

Next TopicCSS Transparent Border

← prev next →