CODEWITHSUNDEEP
htmlcsscss-selectors
biscuitstack
biscuitstack

Reputation: 12112

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 responsive drop-down menu), I can't make the hidden ul appear when clicking the anchor.

HTML:

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor'>Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

CSS:

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

jsFiddle: https://jsfiddle.net/kx0kex7x/

Change the jsFiddle selector from focus to hover, and it works perfectly, leaving me without any reason to doubt my syntax is correct. Using active only displays the ul for the duration of the mousedown. Any pointers? (I'm on Safari 10. Seems to work in the latest Chrome and FF fine).

Update

I've tried using the target selector with partial success. If I change my a.categor1anchor links to match newly created unique ids for each ul.menudrop, I can make the ul.menudrop appear on clicking the anchor. However, this is a responsive design and I can't seem to remove the target selector at other page sizes. For example, at a larger page size, I use the hover selector instead, but the last targeted ul.menudrop from a smaller screensize remains open at larger screen sizes. I can't see any way to clear target selectors for responsive designs. Inherit and Initial displays don't affect it.

Upvotes: 0

Views: 817

Answers (2)

biscuitstack
biscuitstack

Reputation: 12112

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.

Upvotes: 1

VilleKoo
VilleKoo

Reputation: 2854

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/

Upvotes: 1

Related Questions