title: How to iterate each sub menu item of a menu by pressing tab key through jquery?
body: <p>here is the code:</p>
  
  <pre><code>    &lt;ul class="main-nav"&gt;
                          &lt;li class="item-1"&gt;
                              &lt;a href="#" class="menu"&gt;Engines&lt;/a&gt;
                              &lt;div class="arrow-down"&gt;&lt;/div&gt;
                              &lt;ul class="full-sub sub-menu"&gt;
                                  &lt;li class="col-1"&gt;
                                     &lt;ul class="sub-menu"&gt;
                                         &lt;li class="sub-head"&gt;&lt;a href="#"&gt;New&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Personalized Train and Book&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Diesel&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Steamies&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                     &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="col-2"&gt;
                                     &lt;ul class="sub-menu"&gt;
                                         &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Train Engines&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#" id="abdur"&gt;Sub Category Name1&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name2&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name3&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name4&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name5&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name6&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Rail Cars&lt;/a&gt;&lt;/li&gt; 
                                     &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="col-3"&gt;
                                     &lt;ul class="sub-menu"&gt;
                                         &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Other Vehicles&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;Sub Category Name&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Sir Topham Hatt&lt;/a&gt;&lt;/li&gt;
                                     &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="col-4"&gt;
                                     &lt;ul class="sub-menu"&gt;
                                         &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Basic Engines&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Talkin Engines&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Roll and White Engines&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Battery Operated&lt;/a&gt;&lt;/li&gt;
                                        &lt;li class="sub-head"&gt;&lt;a href="#"&gt;Multi-Packs&lt;/a&gt;&lt;/li&gt;
                                     &lt;/ul&gt;
                                  &lt;/li&gt;
                               &lt;/ul&gt;
                          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>i want to focus each item of the sub menu by pressing tab. in the chrome it is focused by deafult bt it is not working in firefox and Ie. I have written following code. Please provide me some solution.</p>
  
  <pre><code>$('.main-nav &gt; li').bind('focusin', openSubMenu);
      $('.main-nav &gt; li').bind('focusout', closeSubMenu);
  
      function openSubMenu() {
          $(this).find('.arrow-down').css('display', 'block').addClass("display-check");
          $(this).find('ul.full-sub').css('display', 'block').addClass("display-check");
      }
      ;
  
      function closeSubMenu() {
          $(this).find('.arrow-down').css('display', 'none');
          $(this).find('ul.full-sub').css('display', 'none');
      }
      function closeSubMenu() {
              if($('.arrow-down').hasClass('display-check'))
                  {
                  $('.arrow-down').css('display', 'none');
                  $('ul.full-sub').css('display', 'none');
                  }
      }
  </code></pre>