You won't want to leave out anyone who chooses to navigate your page with their keyboard rather than their mouse, so you'll want to make sure that each time you style the :hover pseudoclass for links, that you also write styles for the :focus pseudoclass. This will make it possible for a site visitor to easily see what link is currently selected. Style both the :hover and :focus pseudoclasses as follows:

.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after {
  border-top-color: white;
}

Note that it's not necessary to write the :focus styles for list items. List items don't receive focus by using the Tab key on the keyboard, so adding extra styles for them won't have any effect. You only have to worry about the :focus styles for links.