title: How to navigate with keyboard through <ul> <li> element
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/1409214/keyboard-navigation-for-menu-using-jquery">KeyBoard Navigation for menu using jquery</a>  </p>
  </blockquote>
  
  
  
  <p>I created a menu using <code>&lt;ul&gt; &lt;li&gt;</code> tags and showing it to the user when he presses <code>Enter</code> key in the textbox. He can select items of the menu (navigate in menu) using mouse but I want also to allow him to select items from that menu using up/dow buttons of the keyboard for example. </p>
  
  <p>Is it any way to do that using jQuery or CSS?</p>
  
  <p>My menu has following structure:</p>
  
  <pre><code>&lt;div class="services"&gt;
    &lt;div class="items"&gt;
      &lt;ul&gt;                           
          &lt;li class="mail-icon"&gt;&lt;a href="#" id="mail"&gt;&lt;?php echo $langmsg['mail']; ?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="forum-icon"&gt;&lt;a href="#" id="forum"&gt;&lt;?php echo $langmsg['forum']; ?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="chat-icon"&gt;&lt;a href="#" id="chat"&gt;&lt;?php echo $langmsg['chat']; ?&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: <code>&lt;li&gt;</code> element has a background image also.</p>