title: Focus on list item on down arrow press
body: <p>I am creating a custom auto suggest-box I need to move on <code>li</code> items on arrow down press.</p>
  
  <p>so I added tabindex attribute to li it is getting focus. but problem is that it scrolling the div up with some random height that it out the selected li from div.</p>
  
  <p><img src="https://i.stack.imgur.com/Ngx0c.jpg" alt="enter image description here"></p>
  
  <p><strong>after arrow down key:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/mtw7q.jpg" alt="enter image description here"></p>
  
  <p><strong>and after some arrow-down key press:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/S6NWa.jpg" alt="enter image description here"></p>
  
  <p>and after that it goes out of screen while mouse down behave perfectly.</p>
  
  <p>Here I made a <a href="http://jsfiddle.net/38zR3/1/">Demo JSFiddle</a>
  first click <code>item1</code> and then press arrow down it behaving same.</p>