How can I render the triangle outside the container element? <p>I'm trying to build a menu with CSS. When the <code>li</code> element has a class of active, I want a triangle (of a specific size) to appear next to the container. Please see the following <a href="http://jsfiddle.net/hcabnettek/MeczJ/" rel="nofollow" title="js fiddle">http://jsfiddle.net/hcabnettek/MeczJ/</a></p> <p>As I increase the left property, the arrow goes to the end of the container, but slides behind it. I tried z-index and various other things but I can't seem to figure it out. </p> <p>Any help would really be appreciated. Thanks all!</p> <pre><code>&lt;nav&gt; &lt;ul class="nav main-nav"&gt; &lt;li class="active"&gt; &lt;a href="/home"&gt; &lt;i class="icon-home"&gt;&lt;/i&gt; &lt;h6&gt;Home&lt;/h6&gt; &lt;div class="items"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre>