title: why css transition doesn't work
body: <p>I'm trying to add transition but it doesnt work
  I added transition to my links and expect changes on hover state
  I used transition alot, but some times this happens to me and I dont know why this property doesnt work</p>
  
  <p>I prefer to know why it doesnt work</p>
  
  <p>this is my code</p>
  
  <pre><code>&lt;div class="subNavigation"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;درباره بانک مهر&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;درباره بانک مهر 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;درباره بانک مهر 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;درباره بانک مهر 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="javascript:void(0)"&gt;درباره بانک مهر 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>.subNavigation {
   width: 900px;
   height: 274px;
   position: absolute;
   top: 40px;
   right: 0;
   padding: 30px 60px 0 0;
   }
   /* line 126, ../sass/style.scss */
   .subNavigation ul {
   float: right;
   }
   /* line 130, ../sass/style.scss */
   .subNavigation li {
   width: 153px;
   *zoom: 1;
   margin-top: 4px;
   padding-right: 2px;
   padding-bottom: 4px;
   border-bottom: 1px dotted #b4b4b4;
   }
   /* line 38, D:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-      0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
  .subNavigation li:after {
   content: "";
   display: table;
   clear: both;
   }
  /* line 138, ../sass/style.scss */
  .subNavigation li:first-child {
  width: 155px;
  height: 24px;
  margin-top: 0;
  margin-bottom: 14px;
  color: #f7931e;
  border-bottom: 1px solid #dddddd;
  padding-right: 0;
  font-size: 16px;
  line-height: 24px;
  }
  /* line 151, ../sass/style.scss */
   .subNavigation a {
    float: right;
    font-size: 13px;
     height: 24px;
     line-height: 24px;
     padding-right: 2px;
    color: #222;
    -webkit-transition: all, 0.2s, ease-in;
    -moz-transition: all, 0.2s, ease-in;
    -o-transition: all, 0.2s, ease-in;
     transition: all, 0.2s, ease-in;
     }
    /* line 160, ../sass/style.scss */
   .subNavigation a.eng {
    font-family: tahoma;
    }
   /* line 164, ../sass/style.scss */
   .subNavigation a:hover {
    padding-right: 10px;
    border-right: 4px solid #f7941d;
    color: #19ae61;
    }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/X5UBF/" rel="nofollow">The Fiddle</a></p>