
#sub-menu {
  visibility: hidden;
  position: absolute;
  max-height: 0;
  left: 0;
  opacity: 0;
  transition: all .2s ease-in-out;
  z-index: -1;

  .sub-menu-link {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
    text-decoration: none;

    &:hover {
      border-bottom-color: var(--bs-red) !important;
    }
  }
  
  .has-level3 {
    flex: 2;
    background-color: #eee;

    .menu-level-2 {
      & > .sub-menu-link:hover {
        border-bottom-color: transparent !important;
        background-color: #fff;
      }
    }
  }

}


@media (min-width: 992px) {
  #pageNav {

    li.nav-item {
      position: relative;
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        top: 0.5rem;
        left: 100%;
        width: 0;
        height: calc(100% + 0.5rem);
        border-bottom: 2px solid;
        border-bottom-color: var(--bs-red);
        transition: 0.2s all linear;
        z-index: -1;
      }

      &:hover {

        &::before {
          transition-delay: 0.1s;
          width: 100%;
          left: 0;
        }

        & ~ li.nav-item::before {
          left: 0;
        }

      }

    }
  }

  #sub-menu {
    &.show {
      visibility: visible;
      opacity: 1;
      max-height: 80vh;
      z-index: 999;
    }
  }
}