tabindex="-1" on <ul> doesn't work
<p>I have a mega dropdown menu like this from bootstrap (code simplified) :</p>

<pre><code>&lt;li class="dropdown mega-dropdown"&gt;
   &lt;a href="#"&gt;Menu Button&lt;/a&gt;
   &lt;ul tabindex="-1"&gt;
      &lt;li&gt;1st Link&lt;/li&gt;
      &lt;li&gt;2nd Link&lt;/li&gt;
      &lt;!-- many other links --&gt;
   &lt;/ul&gt;
   &lt;!-- many other menu buttons --&gt;
&lt;/li&gt;
</code></pre>

<p>Small fiddle here : <a href="https://jsfiddle.net/48m2ppzc/" rel="nofollow">https://jsfiddle.net/48m2ppzc/</a></p>

<p>I want to simplify the navigation with the tab key :</p>

<ul>
<li>At the beginning the element <code>&lt;ul&gt;</code> has a <code>max-height</code>of  <code>0px</code> so I shoudn't be able to navigate inside it with the tab key (because the menu is hidden).</li>
<li>When I click on the "Menu Button" link, the menu should show up (I set <code>max-height</code> to  <code>500px</code>), and I need to change the tabindex to '0' (I can do it with JQuery so that's not a problem)</li>
</ul>

<p>The problem is at the first point : <code>tabindex="-1"</code> doesn't work, I can still navigate inside the menu with the tab key.</p>

<p>How can I fix this problem? I use HTML5 so <code>tabindex</code> should work on all HTML elements, I also tried with <code>tabindex="0"</code>.</p>