Wie platziere ich ein absolut positioniertes Bild außerhalb seines übergeordneten Elements, dessen Überlauf verborgen ist?

Question

Ich habe Probleme, sicherzustellen, dass meine aktive Grafik außerhalb der Schaltfläche positioniert ist, im Grunde der Überlauf des übergeordneten Elements hält die Grafik in sich versteckt, anstatt draußen zu sein. Ich habe versucht, Position: Absolut und Z-Index zu verwenden, aber ich kann das nicht lösen.

HTML

<ul id="mynav"> 
    <li class="active"><a href="#">Link</a> 
     <ul id="subernav"> 
      <li><a href="#">Inner Link 1</a></li>    
      <li><a href="#">Inner Link 2</a></li> 
      <li><a href="#">Inner Link 3</a></li> 
     </ul> 
     <span class="active ir">Active Link</span> 
    </li> 
    <!-- More links --> 
    <!--<li><a href="#">Link</a></li>--> 
    <!--<li><a href="#">Link</a></li>--> 
    <!--<li><a href="#">Link</a></li>--> 
    <!--<li><a href="#">Link</a></li>--> 
</ul>​ 

CSS

body{background:#000;color:#000;font-family:Arial;padding:20px;} 
a{text-decoration:none;color:#000;} 

#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative} 

#mynav > li a{line-height:45px;} 

#mynav li.active:hover{height:90px;cursor:pointer} 


#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250} 

#subernav li{display:inline-block;zoom:1;*display:inline;} 
#subernav li a{color:#f00;} 

.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}​ 

Link zu fummeln: http://jsfiddle.net/UbvQk/5/

Answer 1

die overflow: hidden entfernen und die height vom mynav active (und der :hover).

Setzen Sie die subernav auf display:none;.

#mynav li.active:hover #subernav hinzufügen display:block;

Updated Fiddle

haben