Question

I have this code

nav {
   background-color:#600;
   padding:3px 0;
}
#menu {
   list-style: none;
   position: relative;
   text-align: center;
   z-index: 50;
}
#menu li {
   position: relative;
   display: inline-block;
   height: 40px;
   width:100px;
   max-width: 100%;
}
#menu li a {
   color: #000;
   text-decoration: none;
   display: block;
   position: relative;
   height: 40px;
   padding: 10px 15px 0;
   font-family: Berlin Sans FB;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
}
#menu li span {
   width: 6px;
   z-index: -1;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
}
#menu li:nth-of-type(1) span {background: green;}
#menu li:nth-of-type(2) span {background: red;}
#menu li:nth-of-type(3) span {background: #ff8400;}
#menu li:nth-of-type(4) span {background: purple;}
#menu li:nth-of-type(5) span {background: #49a7f3;}
#menu li:nth-of-type(6) span {background: yellow;}
#menu li:hover > span {min-width: 100%;}
#menu li a:hover {color: #fff;}
#menu li:hover {box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.3);}

Fiddle

It has worked fine in Chrome, Safari, and Firefox<18. It doesn’t work in Internet Explorer or Firefox 18. Is there something that was changed in this version of Firefox that has changed how transitions are working?

I looked at this question and the accepted answer, but it didn’t make sense
Why is my CSS3 Transition not working in Firefox?

Answer 1

Seems changing the width to a value other than min-width causes it to work properly in Firefox 18/Mac….

 #menu li:hover > span {
  width: 100%;
 }

Fiddle update

As Ben pointed out in the question you linked to, FF seems to want declarative values.