How can I make Tab-key navigation work with popups?
<p>I'm struggling with making a navigation keyboard-accessible, so that the user can <kbd>Tab</kbd> through the links. The problem is with popups that will be shown next to a menu item once it is focused or hovered. Here's a minimal working example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Actions&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Edit&lt;/a&gt; &lt;a class="help" href="#"&gt;(Help)&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Delete&lt;/a&gt; &lt;a class="help" href="#"&gt;(Help)&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>In Firefox 45, when Focus is on "Edit" and its "(Help)" is visible, the next <kbd>Tab</kbd> will not focus anything, but the "(Help)" vanishes. The next <kbd>Tab</kbd> will then move to "Delete".</p>

<p>In Chrome 49, it's even worse. When focus is on "Edit", the next <kbd>Tab</kbd> will not focus anything, and in fact restart the navigation at the page's first link upon the next <kbd>Tab</kbd>.</p>

<p>Is there any way that I can make this work while retaining the general style and document structure?</p>