To change the direction of dropdown menus from left to right, please add the below CSS snippets on additional CSS

For Additional CSS Please go to Dashboard >> Appearance >> Customizer >> Additional CSS

@media screen and (min-width: 64em) {
   .site-navigation li:hover>ul, 
   .site-navigation li.focus>ul {
     left: 0;
     right: auto;
   }

   .site-primary-menu ul ul:before {
     left: 12px;
     right: auto;
   }

   .site-navigation ul ul li:hover>ul, 
   .site-navigation ul ul li.focus>ul {
     left: 100%;
     right: auto;
   }

   .site-navigation ul ul .menu-item-has-children>a>.icon, 
   .site-navigation ul ul .page_item_has_children>a>.icon {
     -webkit-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
   }
}

@media screen and (min-width: 75em) {
   .site-navigation li:hover>ul, 
   .site-navigation li.focus>ul {
     left: auto;
     right: 0;
   }

   .site-primary-menu ul ul:before {
     right: 12px;
     left: auto;
   }

   .site-navigation ul ul li:hover>ul,  
   .site-navigation ul ul li.focus>ul {
     left: auto;
     right: 100%;
   }

   .site-navigation ul ul .menu-item-has-children>a>.icon, 
   .site-navigation ul ul .page_item_has_children>a>.icon {
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);
   }
}

On larger screen it seems fine so I made changes on smaller desktop

Hope it works for you !!

Sincerely,

Minal