Dropdown

SysaCSS provides the following dropdown classes.

Class Defines
ss-dropdown-hvr A hoverable dropdown element
ss-dropdown-click A clickable dropdown element
ss-dropdown-content The dropdown part to be displayed
<div class="ss-dropdown-hvr">
  <button class="ss-button">Hover Over Me!</button>
  <div class="ss-dropdown-content ss-bar-block ss-border">
    <a href="#" class="ss-bar-item ss-button">Link 1</a>
    <a href="#" class="ss-bar-item ss-button">Link 2</a>
    <a href="#" class="ss-bar-item ss-button">Link 3</a>
  </div>
</div>
<div class="ss-bar ss-bg-light-gray">
  <a href="#" class="ss-bar-item ss-button">Home</a>
  <a href="#" class="ss-bar-item ss-button">Link 1</a>
  <div class="ss-dropdown-hvr">
    <button class="ss-button">Dropdown</button>
    <div class="ss-dropdown-content ss-bar-block ss-card">
      <a href="#" class="ss-bar-item ss-button">Link 1</a>
      <a href="#" class="ss-bar-item ss-button">Link 2</a>
      <a href="#" class="ss-bar-item ss-button">Link 3</a>
    </div>
  </div>
</div>