opensearch-docs-cn/_sass/_nested-nav.scss

$primary-open-sky-t3: #E1F0F9;
$primary-open-sky-s2: #006D97;
$primary-open-sky-s1: #0085B8;
$nested-nav-mobile-breakpoint: $header-banner-mobile-breakpoint;
$nested-nav-desktop-min-width: $header-banner-min-width;
@mixin header-level3($color: $primary-open-sky-s1) {
  color: $color;
  font-family: 'Open Sans';
  font-size: 21px;
  font-style: normal;
  line-height: 36px;
  font-weight: 700;
}
@mixin body-text($color: #000) {
  color: $color;
  font-family: 'Open Sans';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
}
@mixin bottom-border-underline($color: $primary-pacific-blue) {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid $color;
}

@media screen and (max-width: $nested-nav-mobile-breakpoint) {
  [role="banner"]#top {
    > .container {
      padding: 0;
    }
  }
  [role="banner"] [role="navigation"] {
    margin-top: 0;
    li {
      margin-right: 0;
      margin-left: 0;
      margin-top: 0;
      margin-bottom: 0;
      a {
        @include body-text;
        color: $primary-open-sky-t3;
        padding-left: 10px;
      } 
    }
  }
  
  [role="navigation"] .nested-nav {
    > li {
      padding-bottom: 20px;
      padding-top: 15px;
      border-bottom-color: $primary-open-sky-s2;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      > .nested-nav--top-menu-item-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        border: none;
        width: 100%;
        &.nested-nav-top-menu-item--wrapper__has_children {
          position: relative;
          z-index: 10;
        }
        > .nested-nav--top-menu-item-wrapper--link {
          flex-basis: calc(100% - 30px - 20px);
          height: 30px;
          flex-grow: 1;
          flex-shrink: 1;
          > a {
            @include header-level3($primary-open-sky-t3);
            padding-left: 10px;
          }
        }
        > .nested-nav--top-menu-item-wrapper--toggle {
          flex-basis: 50px;
          width: 30px;
          height: 30px;
          padding: 0 20px 0 0;
          flex-shrink: 0;
          flex-grow: 0;
          .opensearch-toggle-button--wrapper {
            display: inline-block;
            padding: 0;
            margin: 0;
            height: 30px;
            width: 30px;
            > .opensearch-toggle-button-link {
              display: none;
              padding: 0;
              margin: 0;
              height: 30px;
              width: 30px;
              &.opensearch-toggle-button-link__visible {
                display: inline-block;
              }
            }
          }
          
        }
        &.nested-nav--top-menu-item--wrapper__without-children {
          > .nested-nav--top-menu-item-wrapper--link {
            flex-basis: 100%;
            width: 100%;
            flex-grow: 0;
            flex-shrink: 0;
          }
          > .nested-nav--top-menu-item-wrapper--toggle {
            flex-basis: 0;
            width: 0;
            display: none;
          }
        }
      }
      
      > ul {
        height: 0;
        opacity: 0;
        transition: all .25s ease-out;
        z-index: 1;
        position: relative;
        &[expanded] {
          height: var(--expanded-height);
          opacity: 1;
          display: block;
        }
        &.nested-nav--menu__mobile-hidden-collapsed {
          display: none;
        }
      }
    }
  }
}
@media screen and (min-width: $nested-nav-desktop-min-width) {
  #top {
    z-index: 9;
  }

  [role="banner"] {
    overflow: visible;

    .nav-menu-on {
      overflow: visible;

      .nested-nav {
        li {
          font-size: 15px;
        }
      }
    }

    [role="navigation"] ul.nested-nav > li:before {
      display: inline-block;
    }
  }

  [role="navigation"] .nested-nav {
    > li {
      position: relative;
      float: left;
      > .nested-nav--top-menu-item-wrapper {
        display: block;
        padding: 0;
        margin: 0;
        border: none;
        width: 100%;
        height: auto;
        > .nested-nav--top-menu-item-wrapper--link {
          display: block;
          width: 100%;
          margin: 0;
          height: auto;
        }
        > .nested-nav--top-menu-item-wrapper--toggle {
          display: none;
        }
      }
      > ul {
        list-style: none;
        position: absolute;
        background: #fff;
        padding: 0;
        margin: 0;
        min-width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        border-radius: 2px;
        left: 0;

        li {
          margin: 0;
          float: none;

          &:before {
            display: none;
          }

          a {
            @include header-level6($primary-open-sky-s3);
            width: max-content;
            display: block;
            white-space: nowrap;
            padding: 18px 0 0 0;
            margin-left: 18px;
            margin-right: 18px;
            &:hover,
            &.in-category {
              color: $primary-open-sky-s2;
              text-decoration: underline;
              text-decoration-color: $primary-open-sky-s2;
              text-decoration-thickness: 2px;
              text-underline-offset: 6px;
            }
          }
          &:last-of-type {
            a {
              padding-bottom: 18px;
            }
          }
        }
      }
      
      &:not(:first-child) {
        > ul {
          left: 0;
        }
      }

      &:last-child {
        > ul {
          right: .5em;
          left: auto;
        }
      }

      &:hover {
        > ul {
          display: block;
          visibility: visible;
          opacity: 1;
          top: calc(100% + .5em);
          transition: opacity .25s ease-out, top .25s ease-out, visibility 0s;
        }
      }
    }

    ul {
      visibility: hidden;
      display: block;
      opacity: 0;
      transition: opacity .25s ease-out, top 0s .5s, visibility 0s .5s;
      top: calc(100%);
      min-width: 100%;
      box-sizing: border-box;
    }

    a {
      cursor: pointer;
    }
  }
}

[role="banner"] [role="navigation"] {
  .nested-nav {
    > li.landing-page-redesign--nav--search .search > #search-results {
      > .custom-search-result {
        a {
          font-family: "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif;
          line-height: 1.6;
          font-weight: bold;
          background: linear-gradient(rgb(238, 235, 238) 0%, rgb(238, 235, 238) 100%) repeat-x 0 100%/1px 1px;
          color: rgb(0, 85, 166);
          font-size: 20px;
          text-decoration: rgb(0, 85, 166);
          > cite {
            font-size: 12px;
            font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
            color: #002A3A;
            text-decoration: none;
            font-style: normal;
            display: block;
            line-height: 1;
            font-weight: normal;
          }
        }
        > span {
          font-size: 14px;
          color: #1B4859;
          line-height: 1.4;
          display: block;
          overflow-wrap: break-word;
          font-weight: normal;
        }
      }
    }  
  }  
}