Fake DropDown

Creates a dropdown right underneath an element. Slight bug if you resize window while dropdown is visible.

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<p style="text-align: center">
  <a href="javascript:toggleDropDown()">Show DropDown</a>
</p>
<div style="position:absolute; display:none; width:100px">
  <ul>
    <li class="ui-widget-content">One</li>
    <li class="ui-widget-content">Two</li>
    <li class="ui-widget-content">Three</li>
    <li class="ui-widget-content">Four</li>
    <li class="ui-widget-content">Five</li>
    <li class="ui-widget-content">Six</li>
  </ul>
</div>

JavaScript

toggleDropDown = function() {
  var display = $('div').css("display");
  if (display === "block") {
    $('div').css("display", "none");
  } else {
    var offset = $('a').offset();
    offset.top += $('a').height();
    $('div').css({
      top: offset.top + "px",
      left: offset.left + "px"
    });
    $('div').css("display", "block");
  }
}