CSS transition save any one

[Jazajay]

Hay peeps,
In the middle of coding up a sub menu so it fades in on hover and fades out on exist, using transitions.

Now I can get it to fade in simply enough, but it just "pops out" IE no reverse effect in Firefox and Chrome.
For the life of me I can't see it nor understand why.

My code is:

#nav li ul{opacity:0;position:absolute;margin-top:-400px;-moz-transition:opacity 1.5s linear;-webkit-transition:opacity 1.5s  linear;transition:opacity 1.5s linear}

...

#nav li:hover ul{opacity:1;margin:26px 0 0 -34px;padding-top:0;background:url(data:image/png;base64,<?php echo base64_encode(file_get_contents("../img/drop.png"))?>) no-repeat;height:283px;width:227px}

Can any body tell me why it's not fading out please as I'm totally lost as to the reason.

Was thinking it may be down to the fact I am changing an element that is not directly being "hovered" on, as this works fine for links but they are directly being "hovered" on.

Any ideas/pointers (To the problem), what so ever would be so highly appreciated you would have no idea.

Cheers
Jaz

[Note: Even though PHP code is present it is interpreted as a valid CSS document and that is not the problem, only included due to it being that line that is having the problem]

 

[Jazajay]

For a real site URL to the problem please see:
→ Roger Needle, Cladding, solar panel and window cleaners based in Birmingham

And hover over any of the drop downs off the main navigation. (You will need to also view it in Firefox, Chrome, Safari or Opera)

Haven't checked it in Safari or Opera due to the time.
Just done a pretty big update and restructure to the site so any x-browser problems, not asking people to look, just if you spot anything while looking at the problem, please, please let me know.

Shouldn't be but got to still check it in a Ipad/Mac, Safari and Opera browsers yet.

I will really, really appreciate any solution to this as the first effect I think works really well, just doesn't finish correctly in my eyes. Too sharpe.

Jaz

 

[Levi]

I think this may fix it, but don't quote me lol

Stick this bit

-moz-transition:opacity 1.5s linear;-webkit-transition:opacity 1.5s  linear;transition:opacity 1.5s linear

into

#nav li:hover ul{opacity:1;margin:26px 0 0 -34px;padding-top:0;background:url(data:image/png;base64,[COLOR=#000080]<?php echo base64_encode(file_get_contents("../img/drop.png"))?>[/COLOR]) no-repeat;height:283px;width:227px}

It looks like you've only got the 'transition' on hover and not on the removal of the pointer, ie when it goes back to normal

I've done a text link fade in and fade out and it required transitions on both the normal link and the hover part of the css

 

[Levi]

also found this site via harry's css site

It has css menus with an animated drop down (slides down rather than fades - thats just a different css) but it should give you an idea how to fix it if you take a peak at the css, assuming my but above doesn't work

 

[Jazajay]

Hay fella
Really appreciate it. Unfortunately it hasn't solved it, darn, time is highly appreciated though.

Viewed that site the other week actually for another project but they have the transition on the LI tag, not the UL tag. The problem is I'm not sure it would work due to the fact I have a background image on the UL I want to transition, hence why I think it is down to the fact it is the not element that is technically being "hovered" over that I want the transition to apply to.

The code I have used follows the same logic as the links transition I have used successfully so it should work, but for that it is being applied directly to the element i want to transition/is being "hovered" on.

Could be wrong, and really hope I am but may have to think outside the box if that is the case. Nar rubbish.

Cheers again though fella.

 

[Levi]

Could be wrong, and really hope I am but may have to think outside the box if that is the case. Nar rubbish.

Outside the box - you mean you may have to resort to javascript

 

[Jazajay]

You go too far sir, too far.