Chrome hide menu items with background img - html

Question

I have a menu with a background img in hover.
Only with crhome, i dont see the menu voices when I load the page.
Following, if I go with the mouse to select the voice, appears the menu voices with the img's background, and remains.
I dont have this problem with firefox.
That's the CSS code:
#header {
width: 100%;
text-align: left;
display: block;
height: 60px;
margin: auto ;
width: 100%;
font-size: 130%;
z-index: 10px;
background-color: white;
border-bottom: 1px solid lightgray;
}
#header .main_menu {
height: 100%;
margin: 0 auto;
text-align: center;
width: 700px;
padding-top: 7.5px;
z-index:100;
}
#header .main_menu .normal {
display: inline-block;
width: 100px;
font-weight: bolder;
border-radius: 20px;
padding: 10px 0px;
height: 14px;
border: 2px solid white;
}
.main_menu .logo_main_menu{
display: inline-block;
width: 140px;
font-weight: bolder;
border-radius: 10px;
padding: 14px 0px;
height: 11.5px;
border: 2px solid white;
}
.main_menu .logo_main_menu:hover ,#header .here_home {
color: transparent;
background: url("../images/logo_tapling.png") ;
background-size: 140px;
}
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
color: white;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}
.free_img_2{
display: none;position: relative;height: 100px;margin-bottom: -100px;
float: right;right: 146px;z-index: 20;
}
.free_img{
position: relative; height: 100px;margin-bottom: -100px;
float: right;top:-5px;right: -8px;
}
#header .main_menu .normal a:hover {
}
.can_bg{
border: 2px white solid;
}
#header .normal .active ,#header .normal .main_menu a:hover
{
}
#mainmenu2{
z-index: 10;
position: relative;
/*top:60px;*/
/*left:50%;*/
/*margin-left: -235px;*/
/*right: auto;*/
/*margin:62px auto ;*/
}
#mainmenu2{
display: none;
border-left:2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
-moz-box-shadow: 2px 8px 6px -3px black ;
-ms-box-shadow: 2px 8px 6px -3px black ;
-webkit-box-shadow:2px 8px 6px -3px black;
box-shadow: 2px 8px 6px -3px black;
border-radius:0px 0px 10px 10px;
border-radius: 0 0 10px 10px;
color:black;
padding: 5px 0;
text-align:center;
font-weight:900;
background: url("../images/bg_tapling.png") ;
}
#mainmenu2 ul{
margin: 0px;
padding: 0px;
}
#mainmenu2 li a{
color: white;
text-shadow: none;
}
#mainmenu2 li a:hover{
color: green;
}
#mainmenu2 li .active{
color: lightgreen;
}
#mainmenu2 li{
width: 40%;
text-align: center;
margin: 2.5px auto ;
padding: 10px;
-moz-box-shadow:inset 0px 1px 0px 0px black;
-ms-box-shadow:inset 0px 1px 0px 0px black;
-webkit-box-shadow:inset 0px 1px 0px 0px black;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,
#ededed),color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #ededed 5%, #000000 100% );
background:-ms-linear-gradient( center top, #ededed 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
endColorstr='#000000');
background-color:black;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
/*border:1px solid #dcdcdc;*/
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
/*padding-right: 2.5%;*/
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
#mainmenu2 li:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,
#dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',
endColorstr='#ededed');
background-color:#dfdfdf;
}
.logo {
float: left;
margin: 0;
padding: 5px auto;
height: 100%;
}
.logo img {
height: 56px;
}
#header .menu {
width: 434px;
margin: 0 auto;
}
.menu{
display: none;
}
And this is HTML:
<div id="header">
<div class="menu">
<div class="logo">
<a href="<?=URL?>" >
<img src="<?php echo URL; ?>theme/<?= $this->_theme ? >/images/logo_tapling.png" />
</a>
<div class="separatore"></div>
</div>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</div>
<div class="main_menu">
<a href="<?=URL?>classifica" class="normal <?=$classifica?> ">Classifica
</a>
<a href="<?=URL?>regole" class="normal <?=$regole?>">
Regole
</a>
<a href="<?=URL?>" class="logo_main_menu <?=$home?> " >
Tapling
</a>
Faq
Contatti
</div>
</div>
Tnx so much!

Answer 1

change this
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
color: white;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}
to this
.normal:hover , #header .active{
background: url("../images/bg_tapling.png") ;
-moz-box-shadow: 0px 0px 2px 0px black ;
-ms-box-shadow: 0px 0px 2px 0px black ;
-webkit-box-shadow: 0px 0px 2px 0px black ;
box-shadow: 0px 0px 2px 0px black ;
}