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

Question

我正在尝试使用CSS构建菜单。当li元素具有一个活动类时，我希望在容器旁边显示一个三角形（特定大小）。请参阅以下http://jsfiddle.net/hcabnettek/MeczJ/

当我增加left属性时，箭头会移到容器的末尾，但会在其后面滑动。我尝试了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。