html - Chrome hide menu items with background img -
i have menu background img in hover. crhome, dont see menu voices when load page.
following, if go mouse select voice, appears menu voices img's background, , remains.
i dont have problem firefox.
that's 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 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> <a href="<?=url?>faq" class="normal <?=$faq?> ">faq</a> <a href="<?=url?>contatti" class="normal <?=$contatti?> ">contatti</a> </div> </div> tnx much!
change
.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
.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 ; }
Comments
Post a Comment