My menu has 2 background images with hover effects.
However, I am facing an issue where the background images are not displaying in Firefox.
Here is the HTML code snippet:
<div class="markermenu">
<ul>
<li><a href="#" id="one">Moda e Accessori</a></li>
<li><a href="#" id="two">Hotel e Viaggi</a></li>
<li><a href="#" id="three">Cosmesi</a></li>
<li><a href="#" id="four">Giochi e Scommesse</a></li>
<li><a href="#" id="five">Elettronica</a></li>
</ul>
</div>
Additionally, here is the CSS code for the first item in the menu:
.markermenu{
width: 311px; /*width of menu*/
}
.markermenu ul{
list-style-type: none;
margin: 1px 0;
padding: 0;
border: 0px solid #9A9A9A;
}
.markermenu ul li a#one{
background: url(/img/icon/moda.png) 20px, url(/img/icon/arrow.png) 280px, -webkit- gradient(linear, left top, left bottom, from(#fff), to(#EBF0EF)) ;
background-repeat:no-repeat;
background-color:#fff;
height:79px;
color: #17548e;
display: block;
width: auto;
padding: 30px 0;
padding-left: 90px;
text-decoration: none;
border-bottom: 1px solid #D4DBD9;
border-left: 1px solid #D4DBD9;
}
.markermenu ul li a#one:hover{
color: #fff;
background:url(img/icon/giac.png) 20px, url(img/icon/arrow_white.png) 280px;
background-repeat:no-repeat;
background-color: #17548e;
/*onMouseover image change. Remove if none*/
}
While everything works fine in Chrome, the images do not show up in Firefox unless hovered over. Can anyone help troubleshoot this issue?
Any insights would be greatly appreciated!