title: Peculiar case with CSS Transition for Web Site Navbar on Firefox
body: <p>My site address is <a href="http://applocity.blogspot.com/" rel="nofollow">http://applocity.blogspot.com/</a></p>
  
  <p>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.</p>
  
  <pre><code>#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 &gt; 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;
  }
  </code></pre>
  
  <p>(There is more on the source code of the site--CTRL+F #cssmenu)</p>
  
  <p>What I've tried so far:</p>
  
  <ol>
  <li>Putting background-color instead of background</li>
  <li>Using -moz-transition...of course</li>
  <li>Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover. </li>
  </ol>