.dropmenu {
  z-index: 9;
  
  // main menu
  & {
    background: $dark;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      color: $dark-contrast;
      background: $dark;
      display: block;
      float: left;
      padding: 0;
      position: relative;
      text-decoration: none;
      transition-duration: 0.5s;

      a {
        display: flex;
        align-items: center;
        text-decoration: none !important;
        color: $medium-tint;
        padding: .45rem .75rem;
      }
      
      &:hover, &:focus-within {
        background: $dark-tint;
        cursor: pointer;

        a {
          outline: none;
        }
      }
    }
  }

  // sub-menu
  & li ul {
    width: 100vw;
    list-style: none;
    margin: 0;
    padding: 0;
    background: $dark-tint;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: fixed;
    transition: all 0.5s ease;
    left: 0;
    display: none;

    li {
      clear: both;
      width: 100%;
      background: $dark-tint;
      cursor: pointer;

      a {
        display: block;
        padding: .5rem 1rem;
        white-space: nowrap;

        &:hover, &:focus, &:active, &.active {
          color: $secondary;
        }
      }
    }
  }

  // sub-menu visible
  & li:hover > ul {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}