WoradaS

Hi @hawkeye86 ,

I presume you questions relate to Desktop only.
This could be achieved by update /[theme]/styles.css

Step:
1. Backup current /[theme]/styles.css
2. Update “Primary Menu” css as sample below

/* Primary Menu ---------------------------- */
.primary-menu > li.menu-item-has-children > a {
	/*padding-right: 2rem;*/
}

.primary-menu > li > .icon {
	/*right: -0.5rem;*/
	top: calc(50% - 0.4rem);
}

/* SUB MENU */
.primary-menu ul {
	background: #ff00ff !important;
	/*border-radius: 0.4rem;*/
	color: #fff;
	font-size: 1.3rem;
	opacity: 0;
	/*padding: 0 0 1rem 0;*/
	padding:0;
	position: absolute;
	right: 9999rem;
	top: calc(100% + 0.1rem);
    /* transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; */
	transition: opacity 0.15s linear, transform 0.15s linear, left 0s 0.15s;
	transform: translateY(0.6rem);
	min-width: 25rem;
	z-index: 1;
}

.primary-menu ul::after {
	border: 0.8rem solid transparent;
	/*right: 1.8rem;*/
	left:1.8rem;
}

.primary-menu ul li.menu-item-has-children > a {
	/*padding-right: 4.5rem;*/
}

/* DEEP DOWN */
.primary-menu ul li.menu-item-has-children:hover > ul,
.primary-menu ul li.menu-item-has-children:focus > ul,
.primary-menu ul li.menu-item-has-children.focus > ul {
	left: calc(100% + 0.1rem);
}

.primary-menu ul ul::before {
	bottom: 0;
	height: auto;
	/*left: auto;
	right: -2rem;*/
	left:-2rem;
	right: auto;
	top: 0;
	width: 2rem;
}

.primary-menu ul ul::after {
	border-bottom-color: transparent;
	rtl:ignore;
	/*border-left-color: #000;*/
	/*bottom: auto;*/
	/*right: -1.6rem;*/
	
	left: -2.6rem;
	top: 1rem;
	color:green !important;
}

You may find the sample site with this fixed, here

Hope this help.
Worada S.