Jump to content

.London Domains - £4

Opening dropdown menu with :focus


  • Please log in to reply
1 reply to this topic

#1 johnfotios

  • Member
  • Newbie
  • 21 posts

Posted 09 March 2018 - 16:58

I've been thinking more about accessibility lately, one area I have difficulity is dropdown menus.


With css, it's easy to open a child <ul> with: hover

		<a href="#">item</a>
			<li><a href="#">sub item</a></li>
li > ul { display:none; }
li:hover > ul { display:block; }

Without mouse, you navigate a site with the tab key. Unfortuantely you can't add li:focus to the css, as when you use tab, it tabs through the <a> tags (so you never focus the li).


I could use js, $(selector).focus(function) and .next() to affect the sibling ul, but I wonder if there's a pure html + css solution. Maybe it's to move away from dropdowns entirely.



Any thoughts on this?

  • 0

John Fotios | Indever | Hoj

My little bit of web design... http://www.indever.co.uk

#2 DigitalSquid

  • Overlord
  • Squidministrator
  • 1,045 posts

Posted 09 March 2018 - 17:40

You could use a focus and adjacent selector to make it open.

a:focus + ul { display:block; }

I've always been a fan of the idea that in dropdown menus the top level should be a taxonomy or heading to represent the group below, not a link.

  • 0

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users