CODEWITHSUNDEEP
csshtmlgeometry
Hcabnettek
Hcabnettek

Reputation: 12928

How can I render the triangle outside the container element?

I'm trying to build a menu with CSS. When the li element has a class of active, I want a triangle (of a specific size) to appear next to the container. Please see the following http://jsfiddle.net/hcabnettek/MeczJ/

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.

Any help would really be appreciated. Thanks all!

<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>

Upvotes: 0

Views: 177

Answers (1)

Albert Xing
Albert Xing

Reputation: 5788

Make the li set to overflow: visible. This should probably fix the problem. If not, also check that the ul, which has a set width, is also set to overflow: visible.

Upvotes: 1

Related Questions