Can't Enable Focus Selector With Anchors In Css In Safari

I'm aware that certain elements can't accept a focus selector, such as list elements, but I thought that anchors were fine. Using the following code (I'm creating a pure css respon

Solution 1:

Seems like that anchor tags in Safari need to have tabindex set in order to receive focus.

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylista:focus + ul.menudrop {
  display: block;
}

<ul><liclass="primarylist"><ahref="#"class='category1anchor'tabindex="0">Text</a><ulclass="menudrop"><liclass="secondarylist">One</li><liclass="secondarylist">Two</li><liclass="secondarylist">Three</li></ul></li></ul>

https://jsfiddle.net/VilleKoo/dhpom1uw/

Solution 2:

After researching for the past few days and progressing down multiple avenues only to find a slightly convoluted hack is needed to solve every situation I'll find the menu in, I think it's turning out more elegant and clean to just use jQuery alongside my code to handle various dropdowns appearing, etc. I was trying to avoid it but I don't think CSS is still quite robust enough for menus of this type at the time of writing.