オーバーフローが隠されている親要素の外側に絶対配置されたイメージを配置するにはどうすればよいですか？

Question

アクティブなグラフィックがボタンの外側に配置されているかどうかを確認するのに問題がありますが、基本的に親要素のオーバーフローは、外に出るのではなくグラフィックを内部に隠しています。私は位置を使用しようとしました：絶対インデックスとZ-インデックスが、私はこれを解決することはできません。

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;}​ 

リンク： http://jsfiddle.net/UbvQk/5/

Answer 1

がoverflow: hiddenとmynav active（および:hover）からheightを削除します。

subernavをdisplay:none;に設定します。

display:block;

Updated Fiddle

を持っている #mynav li.active:hover #subernavを追加