customise drop down menu for secondary navigation links when menu is vertically stacked

hi there, i've achieved a vertically stacked menu but i'm struggling to achieve the desired 'drop down' secondary menu look. 

attached is what it currently looks like, and the desired look.

 

- remove current moon icon only on the drop down folder menu links and replace with the small icon circle style: https://www.thestyledsquare.com/navigation-circle-hover-effect-plugin

- remove small icon circle from the main menu menu links

- currently the box won't stay active if you move the cursor away from 'offerings'

- offerings link hover stroke effect to extend to the box

www.moonlitdesign.uk/home-old

 

CURRENT CODE:

 

//navigation moon icon//

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-direction: column;

}

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/61aa04c639b60c4711dd2d19/t/65e0b869f4fe0936cab39abb/1709226089614/Asset+23.png');
    height:25px;
  width: 10px;
}

//////

// CIRCLE NAVIGATION HOVER EFFECT

.header-nav-item {
a {
color: #2b2b0d !important;
&:before {
content: '○ ';
font-size: 1.1em;
}
&:hover:before {
content: '● ';
}
 
}
}

///////

//drop down menu styling//

/* Folder dropdown style */
.header-nav-folder-content {
    background: #E8E8DD !important;
    border-radius: 15px;
  border: 1px solid #1d1d1d;
}

.header-nav-folder-content {
    left: 100px !important;
  margin-top:-30px;
}

//dropdown menu hover and active //

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
  text-decoration:line-through;
}

///////

//menu hover effect//

.header-nav-item--active a:hover {
text-decoration:line-through;
  
}

.header-nav-item--active {text-decoration:line-through;
} 

//active state//

div.header-nav-item--active a {
    background-image: none !important;
}

///////
 

 

 

Edited March 1 by moonlitdesign