#div:hover

[blacktrindade 2]

Boa tarde, estou com um probleminha bem doido, segue imagem:

 

Quando passo o mouse em cima do efeito hover, ele sobe a outra imagem la para cima :/

 

HTML:

 

<div id="box_consultaDoctos">

<div id="op_consultaDoctos"></div>

<div id="op_relatorioDoctos"></div>

</div><!-- FIM DIV BOX CONSULTA DOCTOS -->

CSS:

 

#box_consultaDoctos {
	position:absolute;
	margin-left:180px;
	margin-top:40px;
	width:600px;
	height:40px;
	-moz-border-radius: 19px;
	-webkit-border-radius: 19px;
	border-radius: 19px;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;
	box-shadow: 0px 0px 5px #000000;
}

#op_consultaDoctos {
	width:280px;
	height:80px;
	margin-top:7px;
	background-image:url(../../img/op_doctos/consultar.png);
	background-repeat:no-repeat;

}

#op_relatorioDoctos {
	width:280px;
	height:80px;
	margin-top:-80px;
	margin-left:300px;
	background-image:url(../../img/op_doctos/relatorio.png);
	background-repeat:no-repeat;
}

:(

[Diogo Alves da Silva 2]

Não entendi direito... qual imagem está "la pra cima" ?? A Relatório de Documentos ?