Canceling CSS for older browsers

Hello all-- I’m new here so apologies if I’m not posting in the right place.

I’ve modified an existing WP theme via CSS but unfortunately some users are stuck in an ancient OS/browser version and cannot (specifically) see the dropdown menus I’ve styled. I’ve been messing around with the @supports tag but no luck. Here’s the CSS I’m trying to omit for older browsers. I’m sure I’m using @supports incorrectly as it’s ‘breaking’ my menus the way I’ve coded it below, but I’ve been doing some research as to how to properly use it (or something else) with no luck. Thanks!!

@supports background: rgba(1, 1, 1, .75) {

/*Menus text hover color*/
.menu-main li a:hover {
	color: rgba(110,230,80,1) !important;

/*Drop down menu transparency and hover color*/
.sub-menu {
		background: rgba(1, 1, 1, .75) !important;
  color: rgb(0, 250, 0) !important; 

/*Dropdown menu text color*/
.sub-menu li a {
    color: rgba(250,250,250,.8) !important;

/*Dropdown menu text hover spacing*/
.sub-menu li a:hover {
	letter-spacing: .8px;


Welcome, cfontecilla.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


Gotcha-- the French tilde :wink: aka ` – thanks!