Arrow right hidden at the back of main div - html

Question

JSFIDDLE DEMO
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
1
</li>
<li class="active arrow_box">
2
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-3 col-md-10 col-md-offset-2 main">
Example content with tabs at top
</div>
</div>
</div>
CSS
.sidebar {
display: none; }
#media (min-width: 50em) {
.sidebar {
position: fixed;
top: 30px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px 0;
margin-right: 20px;
overflow: hidden;
background-color: #E5E5E5; } }
.nav-sidebar > li > a {
color: #262626;
font-size: 16pxpx;
padding: 24px 20px 24px 50px; }
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #30C4A3;
background-color: #333;
}
.nav-sidebar > li.active a:after {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid re;
position: absolute;
bottom: -13px;
width: 0px;
left: 0;
margin-left: -10px;
z-index: 90000; }
.main {
overflow: hidden;
max-width: 1024px;
padding: 10px 0;
z-index: 0; }
#media (min-width: 50em) {
.main {
padding-right: 40px;
padding-left: 40px; }
}
.arrow_box {
background: #595959;
}
.arrow_box:after {
left: 100%;
top: 70%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(89, 89, 89, 0);
border-left-color: #595959;
border-width: 15px;
margin-top: -30px;
z-index: 4000;
}
Used Bootstrap Dashboard template example.
Tried omitting overflow-x but the scroll appeared and arrow could be only seen when scroll right. Tried adding padding or margin to give extra space next to li to display arrow, but the arrow still hid behind the main div. Also tried add z-index to header, sidebar, main but also not helping.
Updated
Forgot to clarify that the arrow I have got is only on sidebar. It should be outside the sidebar which is at the left side of content div. That's why I am trying to get arrow visible on the main div and it ends up being hidden.
Please help.

Answer 1

Just remove overflow: hidden; from .sidebar
Example here http://jsfiddle.net/u2Lbx4kc/3/
.sidebar {
position: fixed;
top: 30px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px 0;
margin-right: 20px;
background-color: #E5E5E5;
}

Answer 2

I didn't completely get your question but when the min-width is removed the li with class arrow seem to appear http://jsfiddle.net/u2Lbx4kc/1/

Answer 3

Add classes to ul to give it a width
HTML
<ul class="nav nav-sidebar col-sm-12 col-md-12">
<li> 1
</li>
<li class="active arrow_box"> 2
</li>
</ul>
Fiddle