[Dropup] Pure CSS Dropdown Menu Used For Tooltip | Drop.css

How to make use of it:

1. Override the default variables within the drop.scss and compile it to drop.css.

$dropArrowOffset: 2px;
$dropArrowRadius: 7px;

$dropMenuBorderRadius: 5px;
$dropMenuPrimaryColor: lighten(#111, 15%);
$dropMenuLighterColor: #bdc3c7;
$dropMenuSecondaryColor: #148a73;

$dropSafeZoneOverlap: 10px;

$dropAnimationSpeedMultiplier: 1;

$sass drop.scss drop.css

2. Load the drop.css within the doc or instantly import the drop.scss into your challenge.

<link rel="stylesheet" href="drop.css" />

3. Create a container for the dropdown.

<div class="drop drop--down">
  ...
</div>

4. Add a set off factor to the dropdown element.

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
</div>

5. Create a container to carry the dropdown content.

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
  <div class="drop__content">
  </div>
</div>

6. Add content to the dropdown.

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
  <div class="drop__content">
    <div class="drop-arrow"></div>
    <div class="drop-list -size-medium -position-right -border-rounded">
      <button class="drop-list__btn">Action 1</button>
      <button class="drop-list__btn">Action 2</button>
      <button class="drop-list__btn">Action 3</button>
    </div>
  </div>
</div>

CSS/SCSS Dropdown & Dropup Component, Pure SCSS Drop Tooltips Plugin/Github

See Demo And Download