mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 02:36:11 +02:00
1.1 KiB
1.1 KiB
layout, title, description, keywords
layout | title | description | keywords |
---|---|---|---|
layouts/post.njk | Dropdown | Create a dropdown with CSS | css dropdown, css menu |
HTML
<div class="dropdown">
<!-- The trigger element -->
<div class="dropdown__trigger">
...
</div>
<!-- The content -->
<div class="dropdown__content">
...
</div>
</div>
CSS
.dropdown {
position: relative;
}
.dropdown__trigger {
cursor: pointer;
}
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Position it right below the trigger element */
left: 0;
padding-top: 0.25rem;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #fff;
z-index: 9999;
}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}
You can use a triangle button to indicate that there is content under it.
Move the mouse over the button to see the dropdown.
{% demo %}{% include "covers/dropdown.njk" %}{% enddemo %}