Funçao hover com imagem

[Web Design Valdeci 0]

Bom Dia Pessoal,

 

Estou desenvolvendo um site e estou usando a função css para criar um menu com submenu. Até ai funcionou certinho, o que eu preciso é que na hora que o submenu aparecer, ao passar o mouse no item do submenu ex: quem somos, ele apareça um quadrinho laranjado que fiz no fundo, ele tem mais ou menos 130 px por 51 px.

 

Se acessarem este link http://www.therax.com.br/site/ verão que já está ate chamando esta imagem laranja que falei, mas aparece cortado. Gostaria de ajustar no tamanho exata 130px x 51 px.

 

Alguem poderia me ajudar?

 

Segue o arquivo do submenu:

 

body {
font-family: Calibri;
font-size: 15px;
color: #007684;
font-weight: bold;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 175px; /* Width of Menu Items */
height:215px;
border-bottom: none;
}

ul li {
position: relative;

}

li ul {
position: absolute;
left: 1px; /* Set 1px less than menu width */
top: 5;
margin-top: -230px;
display: none;
margin-left:250px;
background:url(Assets/img/FundoMenu.png)
}

ul li ul {
position: absolute;
left: 1px; /* Set 1px less than menu width */
top: 5;
margin-top: -230px;
display: none;
margin-left:230px;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #007684;
padding: 3px;
border: none; /* IE6 Bug */
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%;}
/* End */

li:hover ul { display: block; } /*  The magic */

#flash {
width:900px;
height:484px;
position:absolute;
top:50%;
left:50%;
margin-top:-235px;
margin-left:-450px;
background-image:url(Assets/img/ftHome.jpg)
}

 

 

CSS submenu:

 

.link_verde_under {
font-family: Calibri;
font-size: 15px;
color: #ffffff;
text-decoration: none;
	width:130px;
height:60px;
font-weight: bold;
line-height: 25px;
}
.link_verde_under:link {
font-family: Calibri;
font-size: 15px;
color: #ffffff;
text-decoration: none;
	width:130px;
height:60px;
font-weight: bold;
line-height: 25px;
}
.link_verde_under:visited {
font-family: Calibri;
font-size: 15px;
color: #ffffff;
text-decoration: none;
	width:130px;
height:60px;
font-weight: bold;
line-height: 25px;
}
.link_verde_under:hover {
font-family: Calibri;
font-size: 15px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
width:130px;
height:60px;
background-image: url(../img/fundMenuTxt.png);
background-repeat: no-repeat;
line-height: 25px;

}
.link_verde_under:active {
font-family: Calibri;
font-size: 15px;
color: #ffffff;
text-decoration: none;
	width:130px;
height:60px;
font-weight: bold;
line-height: 25px;
}

[João Prado 64]

Defina o tamanho do elemento <a> para o mesmo tamanho fixo do elemento <li>

 

Deve resolver.

[Web Design Valdeci 0]

Cara, já mexi tudo que devia neste codigo e nada.

 

Já inseri nesta parte e em todo o codigo:

 

width:130px;

 

Para ver se aumentava alguma coisa mas nada. Poderia ser mais específico? Onde eu devo definir o valor no script? obrigado.

[Logan Martinelli 0]

Vou te dar uma dica para você adaptar nos seus projetos de hoje em diante.

 

Um elemento "<a>" funciona assim;

 

Você vai ter que fazer tudo porque é um elemento livre sem paddings, sem margins, sem nada.

 

Notei também no seu código fonte lá na pagina que você passou que no submenu dentro de <a> você colocou

 

     

 

Para isso no css use assim:

 

 a{padding-left: 15px;} //ou mais de 15 

 

Voltando ao <a>

Então para ficar do jeito que você quer faça assim

 

No css na tag a{} do submenu escreva:

 

1ª Maneira:

a{display:inline-block; width:130px; height:51px;}

 

2ª Maneira

 

Vai setando "padding" até que toda a imagen seja mostrada;

 a{padding:0.3em 0.75em;}

 

Se ainda ficar encobrindo é só ir aumentando

 a{padding:0.5em 0.75em;}