Below is my html file,
<div class="col-xs-6 col-sm-3 my1" id="qwer1" role="navigation"> <!--Change is made here-->
<div class="menuBar">
<ul class="menuList" id="menuList">
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<li><a href="#">Update 1</a></li>
<hr>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
<li><a href="#">Chat 1</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
Below is the css file,
.my1
{
position:fixed;
left:78%;
border-left:1px solid black;
border-bottom:1px solid black;
width:20%;
top:14%;
height:auto;
overflow:scroll;
scroll-face-color:red;
}
The content of the html file is well out of the sreen, but eventhough the scrollbar is not operable. Moreover, I have specified the color of the scrollbar as red but the color effect also doesnt seem to be working. Below is the screenshot of browser,
How can I activte this scrollbar? Thanks in advance.