如何渲染容器元素外部的三角形？

Question

我正在嘗試用CSS創建菜單。當li元素有一個活動類時，我想要一個三角形（特定大小）出現在容器旁邊。請參閱以下內容http://jsfiddle.net/hcabnettek/MeczJ/

當我增加左邊的屬性時，箭頭會移到容器的末端，但會滑到容器的後面。我試過z-index和其他各種東西，但我似乎無法弄清楚。

任何幫助真的不勝感激。謝謝大家！

<nav> 
    <ul class="nav main-nav"> 
     <li class="active"> 
      <a href="/home"> 
       <i class="icon-home"></i> 
       <h6>Home</h6> 
       <div class="items"></div> 
      </a> 
     </li> 
    </ul> 
</nav> 

Answer 1

充分利用li設置爲overflow: visible。這應該可能解決這個問題。如果不是，請檢查具有設置寬度的ul也設置爲overflow: visible。