title: Enabling keyboard navigation in the Bootstrap dropdown-menu
body: <p>Is it possible to navigate using the keyboard to the drop down menu using <kbd>Tab</kbd>, and navigate using the arrow keys to the sub elements of the drop down?</p>
  
  <p>Here is the code I have now:</p>
  
  <pre><code>&lt;input type="text" value="click tab to jump to the drop down."/&gt;
  &lt;div class="bs-docs-example"&gt;
      &lt;div class="dropdown clearfix"&gt;
        &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Menu Item A&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Menu Item B&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Menu Item C&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Menu Item A1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown-submenu"&gt;
                  &lt;a tabindex="-1" href="#"&gt;Menu Item B1&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;You should navigate here with the keyboard.&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Thanks For your Help!&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MGwVM/1/" rel="noreferrer">http://jsfiddle.net/MGwVM/1/</a></p>