z-index с переполнением скрытый

Question

Я пытаюсь добавить стрелку к активному элементу списка, у которого есть много элементов, поэтому я добавляю переполнение, скрытое к контейнерам родительских элементов, и стрелку в элемент после элемента item, но это не появляется из-за переполнения, даже я добавляю z-index к стрелке. Я не хочу добавлять прокрутку, нужно скрывать переполнение.

/* 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; 
} 

вот код на fiddle

Answer 1

Если вы удалите свой 'левый: 120%' стрелу появляется просто отлично. Вам нужно будет изменить левое значение в зависимости от того, где вы хотите, чтобы ваша стрелка была. Но вы не можете использовать более 100%, если используете скрытую переполнения, иначе она будет слишком далеко, и вы не сможете прокручивать ее.

.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, вы могли бы использовать

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

так что вы можете по крайней мере прокрутки по горизонтали, чтобы увидеть стрелу.

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