Customization/styling of dropdown menu (alignment, selection, transparency/colour) [7.1]

Site URL: https://bulldog-perch-zdly.squarespace.com

Hi!

I'm trying to customize my dropdown menu in the 7.1 template Matsuya, and have combined various bits of coding that I found online - but am getting syntax error messages in the Custom CSS. What I would like is for my site header dropdown menus to:

• have all folder items adhere to a LEFT alignment on the dropdown menu (I think the default is right when you have a right header item alignment)
• have a colour selection on hovering on a menu item
• be half transparent, at least in terms of the menu background

I've included the code bits here. I suspect that some of the code is specific, while some parts of it is not specific enough, and that's the reason it's not working.

Supergrateful for any help on this! /Vic

Password: 2020Go

/* Nav item color */
.header-nav-item a {
    color: #000000 !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #336699 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color:  #336699 !important;
}
//-----dropdown menu alignment-----
.header-nav-folder-item {
    text-align: left !important;

}
a.header-nav-folder-title:hover + div, .header-nav-folder-content {
    text-align: center !important;
    position: absolute;
    left: 50% !important;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
  background: rgba(76, 175, 80, 0.6);  !important;
}
//-----Dropdown menu styling-----
..header-nav .header-nav.item—
folder .header-nav-folder-content
{ padding: 0;
.header-nav-folder-item {
padding : .5em 1em:
}
.header-nav-folder-item:hover {
background: 000;
a (color: #fff;)
}}

Freebie for the color selection on a navigation item here: https://www.squareaddons.com -- scroll down to bottom of page where "navigation highlighter effect" is shown. 

26 minutes ago, Kate said:

Freebie for the color selection on a navigation item here: https://www.squareaddons.com -- scroll down to bottom of page where "navigation highlighter effect" is shown. 

Thanks for this, Kate!

It's not exactly what I'm looking for, for this particular site, but I will definitely keep it in min for future projects! 🙂