css transition only working in Firefox

**KeredDrahcir** · Mar 18 '13, 05:03 PM

I'm trying to use CSS transitions to make a background image fade in on my menu when you hover over it. I want it to take about 2 seconds to fade it.
It works perfectly in Firefox but all on other browsers it just appears instantly. In IE it doesn't work at all but I'm not worried about that since I never expected it to work.

CSS LAYOUT

Code:

.mainmenu ul li{
	height: 86px;
	display: inline-block;
	margin: 0;
	padding: 0;
	z-index:1000;
	position: relative;
}
.mainmenu li:after{
	content: "";
	opacity: 0;
	-webkit-transition: opacity 1.5s;
	-moz-transition:    opacity 1.5s;
	-o-transition:      opacity 1.5s;
	-ms-transition:     opacity 1.5s;
	transition:         opacity 1.5s;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}
.mainmenu li:hover:after{
    	opacity: 1;
}

CSS APPEARANCE

Code:

.mainmenu li:after{
	background: url(../images/hover.png) no-repeat center bottom;
}

HTML

Code:

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

Can anyone help? Apart from IE it does work it making the image appear but it would be nice to get the fade in working on Chrome, Safari and Opera. If I can get it working then, I might even be able to think about IE.