Drop-down menu with accessible keyboard - html / css only

Question

I have a html / css drop-down menu that I am trying to get using the keyboard but cannot display it: focus

Example http://jsfiddle.net/2by45fyx/

Here is my html. Note that I added the tab index to the list item so that it can receive focus<li tabindex="0" >

<div id="topnav">
<div class="page">
     <ul>
        <li tabindex="0" ><a href="/">Example 1</a>
            <ul class="dropdown">
                <li><a href="/">Example Page 1a</a></li>
                <li><a href="/">Example Page 2a</a></li>
                <li><a href="/">Example Page 3a</a></li>
            </ul>
        </li>   
        <li tabindex="0" ><a href="/">Example 2</a>
            <ul class="dropdown">
                <li><a href="/">Example Page 1b</a></li>
                <li><a href="/">Example Page 2b</a></li>
            </ul>
        </li>   
    </ul>   
</div>

You can view the full css in the link example http://jsfiddle.net/2by45fyx/

Essentially dropdownhas a hiddendefault value :

#topnav .dropdown { visibility: hidden; }

I can show this normally when the mouse hesitates:

#topnav li:hover .dropdown { visibility: visible; }

I tried adding the following to display a drop-down menu when the parent list item receives focus and the drop-down menu shows, but I can’t insert it.

#topnav li:active .dropdown, #topnav li:focus .dropdown { visibility: visible; }

- , ?

Answer 1

, accesskey:

. : https://jsfiddle.net/70w6hru9/ , , , .

• IE, Chrome, Safari, Opera 15+: [ALT] + accesskey
• Opera 15: [SHIFT] [ESC] + accesskey
• Firefox: [ALT] [SHIFT] + accesskey

, - !