Secondary navigation header icons

Site URL: https://tmforwomen.squarespace.com/

Hello, I have used the below code to add icons next to a couple of secondary navigation links I have in my header. I would like to change the 'Australia' link to a folder in order to have some drop down options, however when I have tried to do so, the icons get all messed up. Please help and thank you 🙂 

.Header-nav--secondary .Header-nav-inner {
  position: relative;
  margin-left: 0px!important;
  a:first-child:before {
    content: '';
    width: 30px;
    height: 35px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/6115de1730ff665c4ccd1a61/1628823064550/trancendental-meditation-for-women-australia-08.jpg);
    margin-left: -35px;
    background-size: contain;
    top: 1px;
  }
  a:last-child:before {
    content: '';
    width: 23px;
    height: 15px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/611626f4b2b060229a5c36cd/1628841716883/Australia_30_20_s+%281%29.png);
    margin-left: -33px;
    background-size: contain;
    top: 5px;
  }
}

This is my aim (Australia here is a link to another page - I want to change this part to a folder)

Australia should be the flag icon.

Icons should not be in the drop down.

Can you add the code? We can check easier

If the site is live, you can duplicate the site & add there