title: Dropdown on focus not positioning itself above following div
body: <p>I've got a drop down <code>div</code> on focus of a <code>&lt;input type='text'&gt;</code> box as follows </p>
  
  <p><a href="http://jsfiddle.net/Newtt/7ffdF/" rel="nofollow">http://jsfiddle.net/Newtt/7ffdF/</a></p>
  
  <p>I need the dropdown box to appear above the <code>container-box</code> div that follows the search box. Currently it's pushing the div downwards. Is there a way I can make this text box behave like a <code>select</code> tag without having to use the <code>select</code> tag. </p>
  
  <p>My CSS for the dropdown div is </p>
  
  <p><code>display:none;z-index:200;</code> </p>
  
  <p>On focus of the  search box, the div appears using:</p>
  
  <pre><code>$('#text-box').focus(function(){
      $('.dropdown').show();
  });
  </code></pre>
  
  <p>I also need the div to disappear on removing focus. </p>
  
  <p>Summarizing, I've got two questions:</p>
  
  <ol>
  <li>Regarding the positioning of the drop box</li>
  <li>Toggling of the dropdown on and off focus of the search box. </li>
  </ol>
  
  <p>Thanks! </p>