title: How do you position a html block (<ul>) directly under a <input> with jQuery?
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id="pgContent"&gt;
              &lt;div id="studyOverlay"&gt;
                  &lt;div id="studyContainer"&gt;
                      &lt;div id="studyTest"&gt;
                          &lt;div id="studyTestContainer"&gt;
                              &lt;input class="dropInput"&gt;
                              &lt;ul class="inputDrop"&gt;
                              &lt;!--some &lt;li&gt;s--&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I want to use jQuery to position the <code>&lt;ul&gt;</code> directly underneath the <code>&lt;input&gt;</code>. This HTML shows only one <code>input</code> and <code>ul</code>, but there can be multiple with the same classes.</p>
  
  <p>I tried this jQuery:</p>
  
  <pre><code>$('.dropInput').live('click', function() {
  var offset = $(this).offset();
  var height = $(this).height();
  var width = $(this).width();
  var top = offset.top + height + "px";
  var right = offset.left + width + "px";
  
  $(this).next().show();
  
  $(this).next().css( {
      'position': 'absolute',
      'right': right,
      'top': top
  });
  });
  </code></pre>
  
  <p>but it positions it very strangely. My guess is that there is something with the offset and there being so many divs. Is there any way to fix this?</p>
  
  <p>Or if you know a CSS way that would be even better!</p>