I'm having trouble with fading-out transitions

[LIZZIE]

While continuing to work on my other problem, I've run into a different issue...

I'm trying to create a fade-in fade-out affect that is identical to the navigation menu in this link...

25 - Pikachu

On my website I have tried both this code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

transition: color 0.7s ease-in-out;

}

and this following code...

li a:hover, .dropdown:hover .dropbtn {

color: #282828;

  background-color: #ffffff;

-webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -o-transition: all 300ms ease;

  transition: all 300ms ease;

}

The second one is the exact code from the website example.

For some reason it will fade in (not as smoothly and a little bit too quick) and it won't fade out at all. I unsure as to why this is, though.

Here is my website...

Pokémon - English dubbed episode 0001

[Nancy OShea]

CSS transition should be on the anchor selector.

Also HOVER has no effect on touch screen devices.  If you use drop menus, you must make them open on click.

[LIZZIE]

hm, I'm pretty sure that's where I have it at. Werd thing is that it seems to work fine on chrome, but not internet explorer.

However, on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

EDIT:

More so weird, the transition works fine on the drop down, even on IE, but not on the top link? that they drop down from?

Besides that, mine seems almost quicker or something? Not as fluid of a transition.

[Nancy OShea · Accepted solution]

LIZZIE  wrote

on the Weebly site, it works just fine on both browsers. I don't understand that, unless I'm missing a line of code or something.

DIY site builders like Wix, Weebly and Squarespace are generating code for browser consumption, not human consumption.   They use a boat load of scripts behind the scenes to fix problems in x browsers.  Even expert coders can't always tell what's going on.   So trying to learn anything useful from these sites is a waste of time in my view.

[LIZZIE]

I actually completely agree with that statement. I don't like using website builders for that reason.

I don't need to do it their way, though. I just need to figure out some way to replicate that in a more correct way.

[mjbelt]

Resource:

CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator