Hello, I would like to know how I stylized the scrollbar of this div, and another thing, by passing the name over the names the hover effect of it opens a div to the left after I put it in that div that holds the names
overflow: auto does not work the hover effect of it would show the other div, when I shot
overflow: auto it works normally, can someone help me? what am I doing wrong ?
link
#usuarios {
position: relative;
width: 200px;
height: 364px;
max-height: 364px;
overflow: auto;
border: 3px solid #c9c9c9;
}
::-webkit-scrollbar #usuarios { width: 10px; }
::-webkit-scrollbar-button #usuarios {width: 10px; }
::-webkit-scrollbar-track #usuarios {width: 10px; }
::-webkit-scrollbar-track-piece#usuarios { width: 10px; }
::-webkit-scrollbar-thumb #usuarios { width: 10px; }
::-webkit-scrollbar-corner #usuarios { width: 10px; }
::-webkit-resizer
#usuarios ul li {position: relative;}
#usuarios ul li:first-child {margin: 5px 0 0 0;font-weight: bold;}
#usuarios ul li:last-child {margin: 0 0 5px 0;}
#usuarios ul li a {
display: block;
margin: 0 5px;
padding: 0 5px;
height: 25px;
line-height: 26px;
font-weight: bold;
font-size: 12px;
text-transform: capitalize;
color: #000;
}
#usuarios ul li .admin {
margin: 0 5px 5px 5px;
background-color: rgba(255,255,255,0.8);
}
#usuarios ul li:hover .admin {
border-radius: 10px;
}
#usuarios ul li:hover a {
background-color: rgba(255,255,255,0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#usuarios ul li:hover a span {
opacity: .95;
}
#usuarios ul li a span {
display: block;
margin: 4px 0 0 0;
width: 18px;
height: 18px;
line-height: 19px;
text-align: center;
font-size: 7px;
font-weight: bold;
color: #fff;
opacity: .60;
border-radius: 50%;
}
#usuarios ul li .on {color: green;}
#usuarios ul li .aus {color: orange;}
#usuarios ul li .off {color: #ff0000;}
#usuarios ul li a .on {
color: #fff;
background-color: green;
}
#usuarios ul li a .aus {
color: #fff;
background-color: orange;
}
#usuarios ul li a .off {
color: #fff;
background-color: #ff0000;
}
#usuarios ul li ul li .perfil {
display: none;
}
#usuarios ul li:hover ul li .perfil {
display: block;
z-index: 9999;
position: absolute;
left: -215px;
top: -35px;
width: 200px;
}
#usuarios ul li:hover ul li .perfil .box_perfil {
width: 196px;
height: 200px;
border: 3px solid #000;
background-color: rgba(0,0,0,0.5);
}
<div id="usuarios" class="usuarios align_right border-radius rgba">
<ul>
<li><a href="javascript:void(0)" class="on admin border-radius">Admin <span class="on align_right">ON</span></a>
<ul>
<li><div class="perfil">
<div class="box_perfil"></div>
</div></li>
</ul>
</li>
<li><a href="javascript:void(0)" class="on">Amanda <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Joana <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Pedro <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Bruna <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Lohana <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="on">Julio <span class="on align_right">ON</span></a></li>
<li><a href="javascript:void(0)" class="aus">Amanda <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="aus">Felipe <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="aus">Igor <span class="aus align_right">AUS</span></a></li>
<li><a href="javascript:void(0)" class="off">Lucas <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Amanda <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Bruna <span class="off align_right">OFF</span></a></li>
<li><a href="javascript:void(0)" class="off">Jéssica <span class="off align_right">OFF</span></a></li>
</ul>
</div>
