arc-hive-wordpress-theme/dist/assets/scss/modules/_navigation.scss

.widget_nav_menu {
    .menu-resources-menu-container {
      position: relative;
    }
    ul.menu {
      list-style: none;
      text-align: left;
      li {
        position: relative;
      }
      a {
        display:block;
        color: $black;
        justify-content: left !important;
      }
      .is-active > a {
        background: unset;
        color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
      }
      width:auto;
      li.menu-item-has-children {
        > a {
          &:after {
            display:block;
            width:0;
            height:0;
            border:inset 6px;
            content:'';
            border-bottom-width:0;
            border-top-style:solid;
            border-color: $anchor-color-alt transparent transparent transparent;
            margin-top: 0px;
            margin-left: 5px;
          }
        }
        ul.sub-menu {
          list-style: none;
          background-color: scale-color($anchor-color, $lightness: 98%);
          position: absolute;
          left:0%;
          top:0;
          margin:0;
          padding:0;
          width: auto;
          visibility:hidden;
          opacity:0;
          transition: transform 0.5s;
          transform: translateY(-$global-padding);
          li.menu-item-has-children {
            > a {
              &:after {
                position: absolute;
                right: 0;
                margin-left: 10px;
                margin-right: 2px;
                border-bottom-width: 6px;
                border-right-width: 0;
                border-right-style:solid;
                border-color: transparent transparent transparent $anchor-color-alt;
              }
            }
          }
        }
        &:hover {
          > a {
            color: scale-color($anchor-color, $lightness: 50%);
            &:after {
              color: scale-color($anchor-color, $lightness: 50%);
            }
          }
          > ul.sub-menu {
            top:100%;
            visibility: visible;
            opacity: 1;
            transform: translateY(0px);
            &:hover {
              background-color: scale-color($anchor-color, $lightness: 98%);
            }
            ul.sub-menu {
              top: 0%;
              left: 100%;
            }
          }
        }
      }
    }
  }
.widget_tag_cloud {
    position: relative;
    overflow: visible;
    margin-left: $global-margin;
    $tags-background-color: scale-color($anchor-color, $lightness: 95%);
    a {
      display: inline;
      color: $black;
      &:before, &:after {
        display: inline-block;
      }
    }
    h6 {
      visibility: hidden;
      opacity: 0;
      width: 0;
      height: 0;
    }
    &:before {
      content: '#tags';
      color: $primary-color;
      background-color:  $tags-background-color;
      padding:$global-padding/4 $global-padding/2;
    }
    &:hover{
      .tagcloud {
        top: 1.6rem;
        visibility: visible;
        opacity: 1;
        transform: translateY(0px);
        background-color: scale-color($tags-background-color, $alpha: -100%);
        @include breakpoint(small){
          width: 80vw;
          right: -1rem;
          text-align: right;
        }
        @include breakpoint(medium){
          width: 90vw;
          right: -15vw;
          text-align: center;
        }
        @include breakpoint(large){
          width: 90vw;
          right: -25vw;
        }

      }
    }
    .tagcloud {
      position: absolute;
      visibility:hidden;
      opacity:0;
      transition: transform 0.5s,background-color 0.5s;
      transform: translateY(-$global-padding);
      background-color: $tags-background-color;
      padding: $global-padding;
      a {
        display: inline-block !important;
        background-color: $tags-background-color;
        padding:$global-padding/4 $global-padding/2;
        font-size: $global-font-size * 0.7 !important;
        &:before {
          content: '#';
          display: inline-block;
        }
        &:hover {
          color: $anchor-color;
        }
      }
    }
  }
@include breakpoint(small){
}
@include breakpoint(medium){
}
@include breakpoint(large){
}