title: Dropdown list in line with and on top of text
body: <p>I have text where one word is clickable and upon being clicked, a dropdown list of items should appear on top of the text (with the text staying in the same place). </p>
  
  <p>I was thinking of using divs instead of an unordered list, because I feel like they are easier to position. However, I am open to all kinds of solutions.</p>
  
  <p>HTML:</p>
  
  <pre><code>This is a sentence, with a 
  &lt;div class="dropdown-list"&gt;
      Clickable Word
      &lt;div&gt;List Item 1&lt;/div&gt;
      &lt;div&gt;List Item 2&lt;/div&gt;
      &lt;div&gt;List Item 3&lt;/div&gt;
  &lt;/div&gt;. Plus some more text to fill the page.
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.dropdown-list {
      display: inline-block;  
  }
  </code></pre>
  
  <p>As you can see in the jsFiddle <a href="http://jsfiddle.net/hLyaf/8/" rel="nofollow">http://jsfiddle.net/hLyaf/8/</a> the divs height changes and extends the height of the whole line, instead of dropping down on top of the text.</p>
  
  <p>Is there any way to achieve the desired effect?</p>