css - 如何在容器元素之外渲染三角形？

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。