Kann die volle Höhe nicht anzeigen, wenn absolute Positionierung verwendet wird

Question

Ich habe ein Popup auf Mosueover. Wenn es in einem Div mit absoluter Positionierung platziert wird, wird nur ein Teil des Popups angezeigt. Mein jsfiddle ist hier. Dies ist ein Follow-up zu meiner Frage here. Als ich diese Frage gepostet habe, war mir nicht klar, dass der Code in einem Div verwendet werden würde, das bereits absolute Positionierung hat. In der Fehlerbehebung, die in diesem Thread gepostet wurde, wird angezeigt, dass das Popup-Fenster ordnungsgemäß angezeigt wird. Der einzige Unterschied zwischen diesem und meinem neuen Code besteht in der Addition der beiden umgebenden Divs. Sie haben Höheneinstellungen von 220px und ich sehe, dass das das Popup einschränkt, aber ich sehe nicht, wie ich es beheben kann. Diese anfänglichen Höheneinstellungen müssen so bleiben wie sie sind, so dass ich sie nicht entfernen oder ändern kann. Würde mir bitte jemand helfen?

<style> 
    #ds-holder { 
    position: relative; 
    margin: 0 auto; 
    width: 300px; 
    height: 220px; 
    overflow: hidden; 
    } 
    .ds-container { 
    top: 0px; 
    left: 0px; 
    width: 140px; 
    height: 220px; 
    position: absolute; 
    overflow: hidden; 
    } 
    #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: absolute; 
    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 {border:1px solid red} 
    .ds:hover #dsspan { display:block; } 
    </style> 

    <div id="ds-holder"> 
     <div class="ds-container"> 
     <div class="ds"> 
      <span id="dsspan"> 
      This line is longer than the rest. 
      <ul> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      </ul> 
      </span> 
      <a href="example.com">Hover Here</a> 
     </div> 
     </div> 
    </div> 

Answer 1

können Sie

In absoluter Position Verwendung left: 0 und right: 0 gemeinsam versuchen, volle Breite zu machen.