Transition problems

I'm trying to use a transition when I hover over a menu item. When I hover over a menu item a bullet appears next to it (I used a background to do this). But when I try to use transition in my css, the bullet comes sliding in from the top to the actually place where it should be. I just want it to appear via the transition, not to slide in, what am I doing wrong?


ul.navList a {
text-decoration: none;
color: #0a0a0a;
padding: 5px 20px 5px 20px;
background: none;
}

ul.navList a:hover {
background: url('../images/bullet.png') left center no-repeat;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
-ms-transition: background 1s;
transition: background 1s;
}

Are you saying that you want the item to appear immediately? If that's the case, you can change "1s" to "0s" to make the transition instantaneous instead of one second, or remove all the transition lines entirely.

If you want to fade the background in, the "opacity" transition would work. Note that this fades the entire link block, both background and any text, and that the transition effects are listed in the main anchor CSS instead of under :hover. Here's what I came up with:


ul.navList a {
text-decoration: none;
color: #0a0a0a;
padding: 5px 20px 5px 20px;
background: url('../images/bullet.png') left center no-repeat;
zoom: 0;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}

ul.navList a:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;

}


Hope that helps.

References:
http://css-tricks.com/css-transparency-settings-for-all-broswers/
http://www.alistapart.com/articles/understanding-css3-transitions/

That works great, only one thing, I do need the text to be visible before the hover too, is there a way to do this? I'm sort of stuck trying to think of one since the visibility applies to the entire block as you said.