Keyboard Accessibility - Show dropdowns using :focus and the keyboard

HTML & CSS
1

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.
http://uablogs.missouri.edu/interface/demo/keyboard-accessible1/

This guy also has an extended version using a small snippet of JS running on jQuery.
http://uablogs.missouri.edu/interface/demo/keyboard-accessible2/

Is this possible without JS?

Thanks, Barry

2

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

3

Thanks Felgall

So that explains why :focus is not working below.

#nav li:hover ul, #nav li:focus ul{ /* Display the dropdown on hover */
	left:0;
}

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