Search code examples
javascriptjquerydrop-down-menumenunav

Remove class from selected dropdown child div when moving to sibling dropdown child div

I need some assistance with forcing a selected nav dropdown child div (.header-child-accordion) to removeClass (.arrow-up) when a user moves to a different nav dropdown and moves completely off the nav dropdown.

The script that I currently have worked well. However, I need to account for when a user does not retract the selected children dropdown (.header-child-accordion).

$(document).ready( function() {
  $('.desktop-header-menu-accordion').click(function(e) {
    e.preventDefault();
    var currentIsActive = $(this).hasClass('arrow-up');
    $(this).parent('.header-nav-folder-content').find('> *').removeClass('arrow-up');
    if(currentIsActive != 1) {
        $(this).addClass('arrow-up');
    }
});
});
.header-nav {
    text-align: center;
width: 100% !important;
    flex: 1 1 80% !important;
    background-color:#000000;
}

.header-nav-list {
    justify-content: center;
    display: inline-flex !important;
    flex-wrap: wrap;
}

.header-nav .header-nav-item {
    margin-left: 0.75vw;
    margin-right: 0.75vw;
}

.header-nav .header-nav-item--folder {
    position: relative;
}

.header-nav-list>div {
    white-space: nowrap;
}

.header-nav-item {
    pointer-events: auto !important;
     text-transform: uppercase !important;
    font-weight: bold;
}

.header-nav-wrapper a {
    text-decoration: none;
    backface-visibility: hidden;
    padding: 0.1em 0;
    color:#ffffff;
}

.header-nav .header-nav-item {
    margin-left: 0.75vw;
    margin-right: 0.75vw;
}

.header-nav .header-nav-item--folder {
    position: relative;
}

.header-nav-item {
    pointer-events: auto !important;
}

.header-nav-item {
    font-family: Arial,Helvetica,sans-serif;
        font-style: normal;
    letter-spacing: 0em;
        line-height: 1.8em;
    font-size: calc((1.2 - 1) * 1.2vw + 1rem);
}

.header-nav-item a {
    display: block;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 100vw!important;
    position: fixed;
    background: #ffffff !important;
    border-bottom: 2px solid #000000;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    top: auto;
    left: -1em;
    padding: 0.5em 1em;
    z-index: 10;
}

.header-nav .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    line-height: 1.3;
}

.header-nav-folder-content > .header-nav-folder-item {
    min-width: calc(100% / 2);
}

.header-nav-folder-item.header-menu-accordion {
    display: flex;
    margin-top: 10px;
    align-items: baseline;
    justify-content: center;
}

.header-nav-folder-item a {
    color: #000000 !important;
}

.header-nav-item a {
    display: block;
}

a {
    cursor: pointer;
}

.header-nav-item .header-menu-accordion:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f107';
    color: #ff4e00;
    float: right;
    cursor: pointer;
    padding-left: 10px;
}

.header-nav-item .header-menu-accordion.arrow-up:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f106';
    color: #ff4e00;
    float: right;
    cursor: pointer;
    padding-left: 10px;
}

.header-nav-folder-content .header-child-accordion {
    background-color: #ff4e00;
    border-bottom: 2px solid #000000;
    text-align: center !important;
    align-items: baseline;
    justify-content: center;
    width: 100vw!important;
    position: absolute;
    justify-content: center;
    grid-row-gap: 0.5vw;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
    justify-items: center;
    padding-top: 0.5vw;
    z-index: 1000;
    box-shadow: rgb(0 0 0 / 30%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}

.header-nav-folder-content div.header-menu-accordion-1 ~ .header-child-accordion-set-1, .header-nav-folder-content div.header-menu-accordion-2 ~ .header-child-accordion-set-2, .header-nav-folder-content div.header-menu-accordion-3 ~ .header-child-accordion-set-3 {
    display: none !important;
}

.header-nav-folder-content div.header-menu-accordion-1.arrow-up ~ .header-child-accordion-set-1, .header-nav-folder-content div.header-menu-accordion-2.arrow-up ~ .header-child-accordion-set-2, .header-nav-folder-content div.header-menu-accordion-3.arrow-up ~ .header-child-accordion-set-3 {
    display: grid !important;
}

.header-menu-accordion-1 ~ .header-child-accordion-set-1, .header-menu-accordion-2 ~ .header-child-accordion-set-2 {
    top: 45px;
}

.header-menu-accordion-3 ~ .header-child-accordion-set-3 {
    top: 85px;
}

.header-nav-folder-item:not(.header-menu-accordion):is(.header-child-accordion-next-level) {
    min-width: calc(25%);
    margin-top: 10px;
    align-items: baseline;
    justify-content: center;
    display: inline-flex;
    flex-wrap: wrap;
}

.sqsrte-small {
    line-height: 1.4 !important;
    font-size: calc((1 - 1) * 1.2vw + 1rem);
}

.header-child-accordion-next-level a {
    color: #ffffff !important;
}

.header-nav-folder-item:not(.header-menu-accordion) a:hover {
    text-decoration: underline;
    text-decoration-color: #000000;
}

.header-nav-folder-item:not(.header-menu-accordion) a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f105';
    display: inline-block;
    color: #000000 !important;
    opacity: 0;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    -webkit-transform: perspective(1px) translatez(0);
    transform: perspective(1px) translatez(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -moz-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -o-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    transition: all .3s cubic-bezier(.25,.25,.25,.25);
    position: absolute;
}

.header-nav-folder-item:not(.header-menu-accordion) a:hover:after {
    opacity: 1;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    -webkit-transform: translatex(8px);
    transform: translatex(8px);
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -moz-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -o-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    transition: all .3s cubic-bezier(.25,.25,.25,.25);
}
<script src="https://kit.fontawesome.com/ebea4c8385.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="header-nav">
  <div class="header-nav-wrapper">

<nav class="header-nav-list">

    <div class="header-nav-item header-nav-item--folder menu-parent-1">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 1</a>
      <div class="header-nav-folder-content">
        
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-1 header-menu-accordion">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-1">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-1">Sub Menu Child 1</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-2">Sub Menu Child 2</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-3">Sub Menu Child 3</a>
                </div>
            </div>
          

            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-2 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 2</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-2">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 4</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 5</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 6</a>
                </div>
            </div>
        
      </div>
    </div>
    
    <div class="header-nav-item header-nav-item--folder menu-parent-2">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 2 </a>
      <div class="header-nav-folder-content">
      <div class="header-nav-folder-item header-nav-folder-item--external">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
       </div>
    </div>
    
    <div class="header-nav-item header-nav-item--folder menu-parent-3">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 3</a>
      <div class="header-nav-folder-content">
        
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-1 header-menu-accordion">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-1">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-1">Sub Menu Child 1</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-2">Sub Menu Child 2</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-3">Sub Menu Child 3</a>
                </div>
            </div>
          

            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-2 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 2</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-2">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 4</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 5</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 6</a>
                </div>
            </div>
            
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-3 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 3</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-3">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 7</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 8</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 9</a>
                </div>
            </div>
        
      </div>
    </div>
  
</nav>

</div>
</div>

Solution

  • I figured out what I needed

    $(document).ready( function() {
  $('.desktop-header-menu-accordion').click(function(e) {
    e.preventDefault();
    var currentIsActive = $(this).hasClass('arrow-up');
    $(this).parent('.header-nav-folder-content').find('> *').removeClass('arrow-up');
    if(currentIsActive != 1) {
        $(this).addClass('arrow-up');
    }
});
});

$(document).ready( function() {
$('.header-nav-item').hover(function(e) {
$(this).find('.desktop-header-menu-accordion').each(function(){
e.preventDefault(); if (
$(this).hasClass("arrow-up")) {
$(this).removeClass("arrow-up"); 
} 
}); 
}); 
});
    .header-nav {
    text-align: center;
width: 100% !important;
    flex: 1 1 80% !important;
    background-color:#000000;
}

.header-nav-list {
    justify-content: center;
    display: inline-flex !important;
    flex-wrap: wrap;
}

.header-nav .header-nav-item {
    margin-left: 0.75vw;
    margin-right: 0.75vw;
}

.header-nav .header-nav-item--folder {
    position: relative;
}

.header-nav-list>div {
    white-space: nowrap;
}

.header-nav-item {
    pointer-events: auto !important;
     text-transform: uppercase !important;
    font-weight: bold;
}

.header-nav-wrapper a {
    text-decoration: none;
    backface-visibility: hidden;
    padding: 0.1em 0;
    color:#ffffff;
}

.header-nav .header-nav-item {
    margin-left: 0.75vw;
    margin-right: 0.75vw;
}

.header-nav .header-nav-item--folder {
    position: relative;
}

.header-nav-item {
    pointer-events: auto !important;
}

.header-nav-item {
    font-family: Arial,Helvetica,sans-serif;
        font-style: normal;
    letter-spacing: 0em;
        line-height: 1.8em;
    font-size: calc((1.2 - 1) * 1.2vw + 1rem);
}

.header-nav-item a {
    display: block;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 100vw!important;
    position: fixed;
    background: #ffffff !important;
    border-bottom: 2px solid #000000;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    top: auto;
    left: -1em;
    padding: 0.5em 1em;
    z-index: 10;
}

.header-nav .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    line-height: 1.3;
}

.header-nav-folder-content > .header-nav-folder-item {
    min-width: calc(100% / 2);
}

.header-nav-folder-item.header-menu-accordion {
    display: flex;
    margin-top: 10px;
    align-items: baseline;
    justify-content: center;
}

.header-nav-folder-item a {
    color: #000000 !important;
}

.header-nav-item a {
    display: block;
}

a {
    cursor: pointer;
}

.header-nav-item .header-menu-accordion:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f107';
    color: #ff4e00;
    float: right;
    cursor: pointer;
    padding-left: 10px;
}

.header-nav-item .header-menu-accordion.arrow-up:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f106';
    color: #ff4e00;
    float: right;
    cursor: pointer;
    padding-left: 10px;
}

.header-nav-folder-content .header-child-accordion {
    background-color: #ff4e00;
    border-bottom: 2px solid #000000;
    text-align: center !important;
    align-items: baseline;
    justify-content: center;
    width: 100vw!important;
    position: absolute;
    justify-content: center;
    grid-row-gap: 0.5vw;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
    justify-items: center;
    padding-top: 0.5vw;
    z-index: 1000;
    box-shadow: rgb(0 0 0 / 30%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}

.header-nav-folder-content div.header-menu-accordion-1 ~ .header-child-accordion-set-1, .header-nav-folder-content div.header-menu-accordion-2 ~ .header-child-accordion-set-2, .header-nav-folder-content div.header-menu-accordion-3 ~ .header-child-accordion-set-3 {
    display: none !important;
}

.header-nav-folder-content div.header-menu-accordion-1.arrow-up ~ .header-child-accordion-set-1, .header-nav-folder-content div.header-menu-accordion-2.arrow-up ~ .header-child-accordion-set-2, .header-nav-folder-content div.header-menu-accordion-3.arrow-up ~ .header-child-accordion-set-3 {
    display: grid !important;
}

.header-menu-accordion-1 ~ .header-child-accordion-set-1, .header-menu-accordion-2 ~ .header-child-accordion-set-2 {
    top: 45px;
}

.header-menu-accordion-3 ~ .header-child-accordion-set-3 {
    top: 85px;
}

.header-nav-folder-item:not(.header-menu-accordion):is(.header-child-accordion-next-level) {
    min-width: calc(25%);
    margin-top: 10px;
    align-items: baseline;
    justify-content: center;
    display: inline-flex;
    flex-wrap: wrap;
}

.sqsrte-small {
    line-height: 1.4 !important;
    font-size: calc((1 - 1) * 1.2vw + 1rem);
}

.header-child-accordion-next-level a {
    color: #ffffff !important;
}

.header-nav-folder-item:not(.header-menu-accordion) a:hover {
    text-decoration: underline;
    text-decoration-color: #000000;
}

.header-nav-folder-item:not(.header-menu-accordion) a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f105';
    display: inline-block;
    color: #000000 !important;
    opacity: 0;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    -webkit-transform: perspective(1px) translatez(0);
    transform: perspective(1px) translatez(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -moz-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -o-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    transition: all .3s cubic-bezier(.25,.25,.25,.25);
    position: absolute;
}

.header-nav-folder-item:not(.header-menu-accordion) a:hover:after {
    opacity: 1;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    -o-transition-property: opacity,transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    -webkit-transform: translatex(8px);
    transform: translatex(8px);
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -moz-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    -o-transition: all .3s cubic-bezier(.25,.25,.25,.25);
    transition: all .3s cubic-bezier(.25,.25,.25,.25);
}
    <script src="https://kit.fontawesome.com/ebea4c8385.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="header-nav">
  <div class="header-nav-wrapper">

<nav class="header-nav-list">

    <div class="header-nav-item header-nav-item--folder menu-parent-1">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 1</a>
      <div class="header-nav-folder-content">
        
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-1 header-menu-accordion">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-1">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-1">Sub Menu Child 1</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-2">Sub Menu Child 2</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-3">Sub Menu Child 3</a>
                </div>
            </div>
          

            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-2 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 2</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-2">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 4</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 5</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 6</a>
                </div>
            </div>
        
      </div>
    </div>
    
    <div class="header-nav-item header-nav-item--folder menu-parent-2">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 2 </a>
      <div class="header-nav-folder-content">
      <div class="header-nav-folder-item header-nav-folder-item--external">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
       </div>
    </div>
    
    <div class="header-nav-item header-nav-item--folder menu-parent-3">
      <a class="header-nav-folder-title" href="/menu-parent-link"> Menu Parent 3</a>
      <div class="header-nav-folder-content">
        
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-1 header-menu-accordion">
              <a href="/menu-child-1">Menu Child 1</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-1">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-1">Sub Menu Child 1</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-2">Sub Menu Child 2</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-1">
                  <a href="/sub-menu-child-3">Sub Menu Child 3</a>
                </div>
            </div>
          

            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-2 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 2</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-2">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 4</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 5</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 6</a>
                </div>
            </div>
            
            <div class="header-nav-folder-item header-nav-folder-item--external desktop-header-menu-accordion header-menu-accordion-3 header-menu-accordion">
              <a href="/menu-child-2">Menu Child 3</a>
            </div>
            <div class="header-child-accordion header-child-accordion-set-3">
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-1">Sub Menu Child 7</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-2">Sub Menu Child 8</a>
                </div>
                <div class="header-nav-folder-item header-nav-folder-item--external sqsrte-small header-child-accordion-next-level header-child-accordion-next-level-set-2">
                  <a href="/sub-menu-child-3">Sub Menu Child 9</a>
                </div>
            </div>
        
      </div>
    </div>
  
</nav>

</div>
</div>