title: Hover popup causes main div to expand
body: <p>I'm trying to have a popup appear when hovering over a div. It is working properly, I think, except that the div calling the popup expands in size to whatever the popup is. Here is my <a href="https://jsfiddle.net/user3052443/0eedc95a/1/" rel="nofollow noreferrer">jsfiddle</a>. </p>
  
  <p>I placed a border around the main div. When you mouse over the text, you will see how that div expands. Is there a way to not have its height affected?  Also, I adapted this code from <a href="http://jsfiddle.net/UNs9J/1/" rel="nofollow noreferrer">here</a>. </p>
  
  <p>I don't understand the purpose of <code>#dsspan:after</code>. If I remove that completely nothing seems to change. Maybe I don't have it setup up correctly and it is causing this problem? </p>
  
  <p>Here's my code:</p>
  
  <pre><code>    &lt;style&gt;
      #dsspan{
       background: none repeat scroll 0 0 #F8F8F8;
       border: 5px solid #DFDFDF;
       color: #717171;
       font-size: 13px;
       height: auto;
       width:auto;
       letter-spacing: 1px;
       line-height: 30px;
       margin: 0 auto;
       position: relative;
       text-align: center;
       text-transform: uppercase;
       top: -80px;
       left:-30px;
       display:none;
       padding:0 20px;
      }
      #dsspan:after{
       content:'';
       position:absolute;
       bottom:-10px;
       height:0px;
      }      
      .ds:hover #dsspan { display:block; }
      &lt;/style&gt;
  
      &lt;div class="ds"&gt;
        &lt;span id="dsspan"&gt;
         This line is longer than the rest.
         &lt;ul&gt;
          &lt;li&gt;Text&lt;/li&gt;
          &lt;li&gt;Text&lt;/li&gt;
          &lt;li&gt;Text&lt;/li&gt;
          &lt;li&gt;Text&lt;/li&gt;
          &lt;li&gt;Text&lt;/li&gt;
         &lt;/ul&gt;  
        &lt;/span&gt;
        &lt;a href="example.com"&gt;Hover Here&lt;/a&gt;
      &lt;/div&gt; 
  </code></pre>