Bootstrap 3 Tutorial

CSS Dropdowns

Last modified on: October 29, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="6aaf32dc-78da-4658-a212-ccd51373a374" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>CSS Dropdowns</h3>
<p>CSS dropdowns allow you to create menus that show additional options when hovered or clicked. They are widely used in navigation bars, buttons, or any interface where a list of related items should appear conditionally. This guide will show how to create dropdown menus with CSS, including hover and click options.</p>
<h4>1. Basic Dropdown Structure</h4>
<p>The simplest dropdown consists of a parent container with a button and a list of options wrapped in a <code>&lt;div&gt;</code> or <code>&lt;ul&gt;</code>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="dropdown"&gt;
    &lt;button class="dropdown-btn"&gt;Dropdown&lt;/button&gt;
    &lt;div class="dropdown-content"&gt;
        &lt;a href="#"&gt;Link 1&lt;/a&gt;
        &lt;a href="#"&gt;Link 2&lt;/a&gt;
        &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. Basic Dropdown CSS Styling</h4>
<p>Start by styling the dropdown button and hiding the dropdown content by default.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Dropdown container */
.dropdown {
    position: relative; /* Positioning parent for absolute child positioning */
    display: inline-block;
}

/* Dropdown button */
.dropdown-btn {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

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

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

/* Hover effect for links */
.dropdown-content a:hover {
    background-color: #ddd;
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. Display Dropdown on Hover</h4>
<p>To show the dropdown content when hovering over the dropdown container, add a <code>:hover</code> rule to make it visible.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. Display Dropdown on Click (Using CSS Only)</h4>
<p>Using the <code>:focus-within</code> selector, you can make the dropdown appear when the button is clicked. This approach requires no JavaScript and relies purely on CSS.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Show dropdown on click (focus within) */
.dropdown:focus-within .dropdown-content {
    display: block;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>To support this, make sure the button is focusable:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.dropdown-btn {
    background-color: #007bff;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    outline: none; /* Remove outline if desired */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>5. Adding a Dropdown Animation</h4>
<p>Adding a fade-in effect makes the dropdown smoother and more visually appealing.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Add transition */
.dropdown-content {
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
    opacity: 1;
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>6. Example of a Complete CSS Dropdown</h4>
<p>Here is a full example combining all the styles mentioned above:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Dropdown&lt;/title&gt;
    &lt;style&gt;
        /* Dropdown container */
        .dropdown {
            position: relative;
            display: inline-block;
        }

/* Dropdown button */
        .dropdown-btn {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            outline: none;
        }

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

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

/* Hover effect for links */
        .dropdown-content a:hover {
            background-color: #ddd;
        }

/* Show dropdown on hover or focus */
        .dropdown:hover .dropdown-content,
        .dropdown:focus-within .dropdown-content {
            display: block;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="dropdown"&gt;
    &lt;button class="dropdown-btn"&gt;Dropdown&lt;/button&gt;
    &lt;div class="dropdown-content"&gt;
        &lt;a href="#"&gt;Link 1&lt;/a&gt;
        &lt;a href="#"&gt;Link 2&lt;/a&gt;
        &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>7. Conclusion</h4>
<p>With pure CSS, dropdown menus can be created with hover or click actions, giving you versatility in layout. For more complex behavior, JavaScript can be added, but CSS alone handles basic dropdown functionality effectively.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More