BNmXyx

index.html

Here is a menu <div class="Menu" role="menu">
    <div class="Menu__MenuTrigger" tabindex="0">
      <i class="icon-settings"></i>
      <span class="screenreader-only">Options</span>
    </div>
    <ul class="Menu__MenuOptions is-below">
      <li class="Menu__MenuOption is-active" role="menuitem" tabindex="-1">
        <i class="icon-edit"></i>
        1st Option
      </li>
      <li class="Menu__MenuOption" role="menuitem" tabindex="-1">
        2nd Option
      </li>
      <li class="Menu__MenuOption" role="menuitem" tabindex="-1">
        3rd Option
      </li>
      <li class="Menu__MenuOption" role="menuitem" tabindex="-1">
        The quick brown fox jumps
      </li>
      <li class="Menu__MenuOption is-disabled" role="menuitem" tabindex="-1">
        disabled option
      </li>
    </ul>
  </div> in a paragraph.

style.css

@keyframes Menu__MenuOptionSlideDown {
  from {
    transform: translate3d(-1px,-25%,0);
    opacity: 0.2;
  }

  to {
    transform: translate3d(-1px,0,0);
    opacity: 1;
  }
}

.Menu {
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  position: relative;
}

$react-menu-arrow-size: 10px;

.Menu__MenuOptions {
  margin-top: $react-menu-arrow-size;
  position: absolute;
  
  
  padding: 8px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: none;
  text-align: left;
  background-color: white;
  
  &:before, &:after {
	content: ' ';
	position: absolute;
	width: 0; height: 0;
    left: calc(50% - 20px);
	border: 10px solid transparent; // arrow size
  }
  &:before {
    border-bottom-color: #fff;  // arrow color
    top: -19px;
	z-index: 2;
    
  }
  &:after {
    border-bottom-color: #ccc; // arrow border color
    top: -20px;
	z-index: 1;
  }
  
  .Menu.is-open &,
  .Menu__MenuTrigger:focus + & {
    display: block;
    animation-duration: 0.2s;
    animation-name: Menu__MenuOptionSlideDown;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0,1,0.5,1);
  }
}

.Menu__MenuTrigger {
  
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
  
  background: #f7f7f7;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  padding: 8px;
  
  
  &:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px #00a4ef;
    color: #333;
  }
  
  &:hover {
    background: #ebebeb;
    color: #333;
  }
  
}

.Menu__MenuOption {
  border-radius: 0;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
  padding: 6px 12px;
  list-style-type: none;
  cursor: pointer;
      
  &[class*=icon-]:before, 
  &[class^=icon-]:before { margin-right: 8px; }
  
  &:focus {
    outline: none;
  }
  
  &:hover, &[is-active] {
    background-color: #0096db;
    color: white;
  }
  
  &[is-disabled] {
    background: none;
    cursor: not-allowed;
    color: darken(hsl(0,0,90%), 20%);
  }
}