Vertical navigation sub menu items

Hi, I am trying to use right side sub menu items with a vertical navigation.

I used the CSS from this post https://generatepress.com/forums/topic/submenu-customization-with-leftside-navigation/ as a starting point with one very minor modification that I commented out as I didn't want the sub menu full height.

/* Navigation sub item slide out direction */
@media (min-width: 1025px) {
   .site-header {
        overflow: visible;
    }
	.site-header .main-navigation li a:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    left: 100%;
	}
    .main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
        left: 200px;
        display: flex;
        flex-flow: column nowrap;
        top: 0;
    }
    .main-navigation:not(.toggled) ul li.sfHover>ul:before, .main-navigation:not(.toggled) ul li:hover>ul:before {
        content: "";
        background-color: #000000;
        z-index: 0;
        position: absolute;
        top: -100vh;
        left: 0;
        width: 240px;
        /*height: 200vh; */
    }
	.gp-icon.icon-arrow {
	 	transform: rotateZ(270deg);
	  	top: 3px;
	  	position: relative;
	}
}

Issue one - is the submenu items at the top of menu i.e "About" and "Hair Bar" are very difficult to hover to the sub menu items. Whereas the main level items down the middle of the menu work properly.

Issue two - I would like a gold sub menu left border like the original site I'm converting (Find URL is up in top bar), when you hover to sub menu the gold border activates with the sub menu.