CODEWITHSUNDEEP
htmlcssnavbar
somil
somil

Reputation: 360

Peculiar case with CSS Transition for Web Site Navbar on Firefox

My site address is http://applocity.blogspot.com/

I have a navigation bar (#cssmenu if you want to find it in the source code) and for some odd reason this is occurring: I made it so the links change colors upon hover and that works fine. But I wanted to add a transition so the background-color changes colors by fading in and out. This works fine on Chrome but it only works on the sub-links (e.g. under device and category) on Firefox. I have not been able to figure out why this happens.

#cssmenu a {

background: #999999;
color: #FFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
padding: 0px 25px; 

//border-radius: 5px; (NOT ACTIVE)
}

    #cssmenu ul li:hover > a { 

background: #66FF99;
  color: #000000;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition:background 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}

(There is more on the source code of the site--CTRL+F #cssmenu)

What I've tried so far:

  1. Putting background-color instead of background
  2. Using -moz-transition...of course
  3. Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover.

Upvotes: 2

Views: 107

Answers (1)

Cody Guldner
Cody Guldner

Reputation: 2896

I figured it out. Here is the link to my solution. http://jsfiddle.net/mrytF/2/

The problem was coming from lines 59-61. You had this code:

.cssmenu a {
  -moz-transition: background 1s ease;
}

When .cssmenu doesn't exist. So I commented this code out, and it works fine now in firefox. I also commented out some CSS that I thought was redundant

Hope this helps

Edit

Fixed the problem with not having the sub-menu show. The main problem here was that you had line 22 as #cssmenu ul li.hover, when it needed to be #cssmenu ul li:hover. Here is the fiddle

http://jsfiddle.net/mrytF/3/

Upvotes: 1

Related Questions