Dropdown

Fully featured Dropdown component using CSS only, no JS at all

Example

Code

<details class="cssonly-dropdown">
  <summary>Show dropdown</summary>
  <ul class="cssonly-dropdown-menu">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <!-- Optional divider -->
    <li class="divider"></li>
    <!-- end -->
    <li><a>Separated link</a></li>
  </ul>
</details>

Options

CSS Variables

  --background-color: <color> // default value: #fff;
  --color: <color> // default value: #333;
  --hover-background-color: <color> // default value: #f5f5f5;
  --hover-color: <color> // default value: #262626;

Class names

  cssonly-dropdown-left // align the dropdown starting point to left (this is the default)
  cssonly-dropdown-right // align the dropdown starting point to right
  cssonly-dropdown-dropup // open the dropdown upwards
  cssonly-dropdown-onhover // open the dropdown by hovering with the mouse
  no-close // don't close the dropdown when click outside

Important: When using the cssonly-dropdown-onhover option, you most also replace the <details> element with a regular <div> tag (see an example below).

Example

Code

Options

CSS Variables

Class names

Custom examples

Open on hover

Open upwards

Right alignment

No closing when clicked outside