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.primarylist a:focus + ul.menudrop {
  display: block;
}

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor' tabindex="0">Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="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.