z-index with overflow hidden

Question

I'm trying to add an Arrow to the active item of list which have alot of elements so I add overflow hidden to items parent's container, and the arrow to the after of item element, but it doesn't appear because of the overflow, even I add z-index to the arrow. I don't want to add scroll, overflow hidden is needed.

/* HTML */

<div class="row">
    <div class="col-xs-2">
        <ul class="list-unstyled">
            <li class="active">item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
            <li>item7</li>
            <li>item8</li>
            <li>item9</li>
        </ul>
    </div>
    <div class="col-xs-10">

    </div>
</div>
<a class="btn btn-primary" type="button">Scroll</a>

/* CSS */

.row {
    background-color: #CCC;
    height: 100px;
    overflow: hidden;
}
.row .col-xs-2 {
    background-color: #fafafa;
    text-align:center;
    position:relative;
}
.row ul {overflow:hidden; height:100%;position:relative;}
.row .col-xs-10 {height:100%; background-color:#aeaeae;}
.row .col-xs-2 li {position: relative;width:100%;}
.row .col-xs-2 li.active:after {
    left: 120%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(245, 245, 245, 0);
    border-left-color: #FF5500;
    border-width: 20px;
    margin-top: -20px;
    z-index: 1;
}

here is the code on fiddle

Answer 1

If you remove your 'left: 120%' your arrow shows up just fine. You will need to change the left value depending on where you want your arrow to be. But you can't use more then 100% if you use overflow-hidden, else it will be too far out and you can't scroll.

.row .col-xs-2 li.active:after {
    left: 0%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(245, 245, 245, 0);
    border-left-color: #FF5500;
    z-index: 1;
}

Alternativly, you could use

.row {
    background-color: #CCC;
    height: 100px;
    overflow-y: hidden;
}

so you can at least scroll horizontally to see your arrow.

http://fiddle.jshell.net/nct3rdhg/1/