CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Dropdown

Move the mouse over the button to see the dropdown.
<style>
/* Hide the dropdown's content by default -->
.dropdown-content {
    display: none;
}

/* Show the content when hover on the container -->
.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div
    class="dropdown"
    style="
        position: relative;
    "
>
    <!-- The trigger element -->
    <button>...</button>

    <!-- The content -->
    <div
        class="dropdown-content"
        style="
            /* Position it right below the trigger element */
            left: 0,
            paddingTop: '4px',
            position: 'absolute',
            top: '100%',

            /* It should be on the top of other elements */
            backgroundColor: '#FFF',
            zIndex: 9999,

            /* Size */
            height: '200px',
            width: '200px',
        "
    >
        ...
    </div>
</div>

Related patterns

Menu

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!