CSS Introduction | Advanced CSS | Dropdown Effect

Tags:

An effect that shows another element or text when the user hovers over an element is called a dropdown effect.
With CSS, you can set up this kind of dropdown effect easily.

The following example implements a dropdown effect by using the display property.

<style>
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #F9F9F9;
        min-width: 160px;
        padding: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown:hover .dropdown-content { display: block; }
</style>

In the example above, the display property of the <div> element that should appear when the user hovers is set to none. This makes it invisible at first.

However, when the user hovers over a specific element, the display property of that <div> element changes to block. At that point, the <div> element becomes visible.

A menu whose submenus appear when the user hovers over it is called a dropdown menu. You can also implement this type of dropdown menu easily by using the dropdown effect.

<style>
    .dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
    .dropdown { position: relative; display: inline-block; }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #FFDAB9;
        min-width: 70px;
        padding: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
    .dropdown-content a:hover { background-color: #CD853F; }
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>

As in the previous example, this example also implements a dropdown menu by using the display property of the element.