CSS - Dropdowns

Previous
Quiz
Next

The dropdown is a user interface element that includes a list of options. It allows the user to choose one value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus, forms, and other interactive components of a website.

Table of Contents


 

How to Style Dropdown in CSS?

  • Setting the Dimensions: In CSS, padding, height and width properties can be used to adjust size of dropdown in a webpage.
  • Define Color and Border: A UI compatible color and border with the right thickness are recommended practice for styling. The background-color and border property can be used to set color and border in css.
  • Change the default arrow: Set the property '-webkit-appearance: none' to remove the default arrow and add custom arrow as icon that matches webpage theme.
  • Hover Effect: Interactive styling like hover effect change the style of dropdown when user hover the mouse over it. This can include changes in opacity, colors, etc.
  • Responsive design: Use media queries to adjust the dropdown styling for different screen sizes.

This chapter will cover the utilization of CSS for styling and arranging dropdown menu elements, controlling their appearance and behavior.

Style a Dropdowns using CSS

A dropdown can be defined using <select> tag in HTML. When you click on a dropdown, it expands to show the available options, and you can select one of these options by clicking on it.

In the below example we applied following styles:

  • First of all we styled body by setting a good font style and defined a background color for body. We used CSS flexbox layout system to center dropdown element.
  • Then for select element we defined dimension with padding and width properties. we styled border, color and set border-radius using border, background-color and border-radius properties respectively.
  • We removed default dropdown icon using '-webkit-appearance: none' property for select tag. And we defined custom arrow using pseudo-element ::after. Then aligned it's position using few other properties.
  • Then we added hover effect and focus effect for select element.

Example

Let us see an example.

<html lang="en">

<head>
    <style>
        /* Basic styles for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            margin: 0;         
        }

        /* Container for the select element */
        .select-container {
            position: relative;
            width: 200px;
        }

        /* Styling the select element */
        .select-container select {
            width: 100%;
            padding: 10px;
            border: 2px solid #007bff;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333333;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }

        /* Adding a custom arrow */
        .select-container::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #007bff;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* Hover effect for the select element */
        .select-container select:hover {
            border-color: #0056b3;
        }
        
        /* Focus effect for the select element */
        .select-container select:focus {
            border-color: #0056b3;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="select-container">
        <select>
            <option value="option1"> Option 1 </option>
            <option value="option2"> Option 2 </option>
            <option value="option3"> Option 3 </option>
        </select>
    </div>
</body>

</html>

CSS Dropdown Hover Effect

A hoverable dropdown is a user interface element where a dropdown menu appears when a user hovers the cursor over the trigger element. The dropdown menu usually disappears when the user moves their cursor away from the trigger element.

We have used :hover pseudo-class to create hover effect for <select> tag.

Example

Let us see an example. This example uses anchor tags inside the dropdown box and style them to fit a styled dropdown button.

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: none;
        }
        .dropdown-menu li {
            padding: 10px; 
            background-color: #15AD39;
        }
        .dropdown-menu li a {
            display: block; 
            text-decoration: none; 
            color: #ffffff;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .dropdown-menu li:hover {
            background-color: #82ea32;
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>

        <ul class="dropdown-menu">
            <li> <a>Option 1</a> </li>
            <li> <a>Option 2</a> </li>
            <li> <a>Option 3</a> </li>
        </ul>
    </div>
</body>

</html>

CSS Right Aligned Dropdown

You can place a dropdown menu on the right side of the screen by applying a float: right style to the container that contains the dropdown menu. This arrangement shifts the menu to the right-hand side of the screen.

Example

Let us see an example.

<DOCTYPE html>
 <html>
<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            float: right; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: none;
        }
        .dropdown-menu li {
            padding: 10px; 
            background-color: #15AD39;

        }
        .dropdown-menu li a {
            display: block; 
            text-decoration: none; 
            color: #ffffff;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .dropdown-menu li:hover {
            background-color: #82ea32;
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <button class="dropdown-button">
            Select an Option
        </button>

        <ul class="dropdown-menu">
            <li> <a> Option 1 </a> </li>
            <li> <a> Option 2 </a> </li>
            <li> <a> Option 3 </a> </li>
        </ul>
    </div>
</body>

</html>

CSS Dropdown Menu with Images

You can enhance the dropdown by including images along with the textual options. When you hover over small image or menu button, a larger size image appears along with a description.

Example

Let us see an example.

<DOCTYPE html> 
<html>

<head>
    <style>
        body{
            height: 300px;
        }
        .dropdown {
            position: relative; 
            display: inline-block;
            height:200px;
        }
        .dropdown-img-menu {
            display: none; 
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .dropdown:hover .dropdown-img-menu {
            display: block;
        }
        .img-description {
            padding: 15px; 
            background-color: rgb(38, 222, 53);
            text-align: center;
        }
        p{
            border: 2px solid;
            padding: 10px;
            background: aqua;    
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <p>Flowers</p>
        <div class="dropdown-img-menu">
            <img src="/https/www.tutorialspoint.com/css/images/red-flower.jpg" alt="Red Flower" 
                width="150" height="100">
            <div class="img-descripition">
                Beautiful Red Flower
            </div>

            <img src="/https/www.tutorialspoint.com/css/images/orange-flower.jpg" alt="Red Flower" 
                    width="150" height="100">
            <div class="img-descripition">
                Beautiful Orange Flower
            </div>
        </div>
    </div>
</body>

</html>

CSS Dropdown Menu Navbar

A dropdown navbar is commonly found in website navigation menus. It consists of a horizontal bar that contains a list of links. When users hover over or click on a specific link, a dropdown menu appears, display additional navigation options or content related to the selected link.

Now we will apply our dropdown menu knowledge to create a beautiful navigation bar using CSS.

Example

Let us see an example.

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            height:200px;
        }
        ul {
            list-style-type: none; 
            margin: 0; 
            padding: 0; 
            overflow: hidden;
            background-color: #40a944;
        }
        li {
            float: left;
        }
        li a, .dropdown-option {
            display: inline-block; 
            color: white; 
            text-align: center; 
            padding: 14px 16px;
            text-decoration: none; 
            z-index: 99;
        }
        li a:hover,.dropdown:hover .dropdown-option {
            background-color: #82ea32;
        }

        li.dropdown {
            display: inline-block;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            min-width: 160px; 
            background-color: #f9f9f9; z-index: 1;
        }
        .dropdown-menu a {
            color: black; 
            text-decoration: none; 
            display: block; 
            text-align: left;
        }
        .dropdown-menu a:hover {
            background-color: #82ea32;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>

<body>

    <h2>Dropdown Menu inside a Navigation Bar</h2>
    <ul>
        <li> <a>Tutorialspoints</a> </li>
        <li> <a>Home</a> </li>

        <li class="dropdown">
            <a class="dropdown-option"> Articles </a>
            <div class="dropdown-menu">
                <a>HTML</a>
                <a>CSS</a>
                <a>Bootstrap</a>
            </div>
        </li>
    </ul>

</body>

</html>
Print Page
Previous
Next
Advertisements