jquery-drawer/src/css/dropdown.css

Flexible drawer menu using jQuery, iScroll and CSS.

/*!------------------------------------*\
    Dropdown
\*!------------------------------------*/
.drawer-dropdown-menu {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--drawer-dropdown-bgColor);
}

.drawer-dropdown-menu > li {
  width: 100%;
  list-style: none;
}

.drawer-dropdown-menu-item {
  line-height: var(--drawer-navbar-height);
  display: block;
  padding: 0;
  padding-right: var(--drawer-gutter-x);
  padding-left: calc(var(--drawer-gutter-x) * 2);
  text-decoration: none;
  color: var(--drawer-dropdown-color);
}

.drawer-dropdown-menu-item:hover {
  text-decoration: underline;
  color: var(--drawer-dropdown-hover-color);
  background-color: var(--drawer-dropdown-hover-bgColor);
}

/*! open */
.drawer-dropdown.open > .drawer-dropdown-menu {
  display: block;
}

/*! drawer-caret */
.drawer-dropdown .drawer-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  transition: transform .2s ease, opacity .2s ease;
  transform: rotate(0deg);
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/*! open */
.drawer-dropdown.open .drawer-caret {
  transform: rotate(180deg);
}