Estou com um problema creio que bem simples. porém ja fiz de tudo e nada resolve, como podem ver na print a div que está com o hover
ela não fica em cima da div pai
http://prntscr.com/isgxqp oque eu poderia fazer ? a div info_perfil
está com um left: -100px
porém ela não está ficando em cima da div pai
e ela está com o z-index: 9999
CSS:
ul {
list-style: none;
}
ul li {
position: relative;
float: left;
}
#right {
float: right;
box-sizing: border-box;
padding: 5px 5px;
width: 220px;
height: 100%;
background-color: rgba(255,255,255,0.9);
}
#right .usuario_content ul li {
width: 100%;
height: 40px;
border-bottom: 1px dashed rgba(0,0,0,0.4);
}
#right .usuario_content ul li:last-child {border: none;}
#right .usuario_content ul li a {
position: absolute;
padding: 0 0 0 40px;
width: 100%;
height: 40px;
text-align: left;
font-size: 13px;
box-sizing: border-box;
z-index: 9;
}
#right .usuario_content ul li:hover a {
background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#right .usuario_content ul li ul li .info_perfil {display: none;}
#right .usuario_content ul li:hover ul li .info_perfil {
top: -37px;
left: -110px;
display: block;
z-index: 9999;
width: 250px;
height: 250px;
background: #ccc;
}
HTML:
<div id="right">
<div id="Principal" class="usuario_content" style="display:block;">
<ul>
<li id="">
<img src="fotos/1.jpg" class="avatar align_left" border="0"/>
<a href="#" id="" class="comecar">Amanda Ferreira</a>
<span id="" class="status on absolute"></span>
<strong class="absolute">Aqui vem o status da pessoa legal</strong>
<ul>
<li><div class="info_perfil absolute"></div></li>
</ul>
</li>
<li id="">
<img src="fotos/1.jpg" class="avatar align_left" border="0"/>
<a href="#" id="" class="comecar">Amanda Ferreira</a>
<span id="" class="status on absolute"></span>
<strong class="absolute">Aqui vem o status da pessoa legal</strong>
<ul>
<li><div class="info_perfil absolute"></div></li>
</ul>
</li>
</ul>
</div>
</div>