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: #chat #right .usuario_content ul li { width: 100%; height: 40px; border-bottom: 1px dashed rgba(0,0,0,0.4); } #chat #right .usuario_content ul li:last-child {border: none;} #chat #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; } #chat #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; } #chat #right .usuario_content ul li ul li .info_perfil {display: none;} #chat #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="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>