Simple implementation of CSS dropdown - doesn't require any JavaScript. Well you can use JavaScript for better compatibility.
<div class="dropdown">
<button class="button has-dropdown-icon">Dropdown</button>
<div class="dropdown-body">
<div class="dropdown-body-text">Dropdown content</div>
</div>
</div><div class="dropdown">
<button class="button button-primary has-dropdown-icon">Dropdown menu</button>
<div class="dropdown-body">
<a class="dropdown-item" href="#">Some action</a>
<a class="dropdown-item" href="#">Another action</a>
<span class="dropdown-item-sep"></span>
<a class="dropdown-item" href="#">CSS dropdown without JS</a>
</div>
</div>Add active class to dropdown if you want to open it by default.
<div class="dropdown active"></div>$dropdown-icons-size: rem(5) !default;
$dropdown-icons-size-small: rem(4) !default;
$dropdown-icons-size-large: rem(7) !default;
$dropdown-width: rem(220) !default;
$dropdown-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.08) !default;:root {
--r-dropdown-icons-size: #{$dropdown-icons-size};
--r-dropdown-icons-size-small: #{$dropdown-icons-size-small};
--r-dropdown-icons-size-large: #{$dropdown-icons-size-large};
--r-dropdown-width: #{$dropdown-width};
--r-dropdown-background: var(--r-color-white-darken-2);
--r-dropdown-border-color: var(--r-color-white-darken-15);
--r-dropdown-shadow: #{$dropdown-shadow};
--r-dropdown-item-color: var(--r-color-dark-lighten-20);
--r-dropdown-item-hover-background-color: var(--r-color-white-darken-5);
--r-dropdown-item-hover-color: var(--r-color-dark);
--r-dropdown-item-sep: var(--r-color-white-darken-8);
}