Keyboard Accessibility - Show dropdowns using :focus and the keyboard

Hi all

I’m trying to stay away from adding JavaScript and was wondering if its possible to make :focus work like :hover when using my keyboard (tab key).
The dropdowns don’t work when using the keyboard ( :focus ), is there a solution to use without using JavaScript?

I have a working copy running locally but have a link below to demonstrate a online example which is very similar.

This guy also has an extended version using a small snippet of JS running on jQuery.

Is this possible without JS?

Thanks, Barry

Only <a> tags and form fields can be given the focus - you can never give the focus to any other part of the page. So you could apply :focus to <a> tags within the menu but not to the rest of the menu. Try applying the focus to the <a> tags inside the <li> tags instead of to the <li> tags

Thanks Felgall

So that explains why :focus is not working below.

#nav li:hover ul, #nav li:focus ul{ /* Display the dropdown on hover */

Any suggestions or might have to settle for a small snippet of JS for keyboard users?