title: how to make smooth css transition
body: <p>how can i get a css transition example like in <a href="http://www.webdesignerdepot.com/2010/01/css-transitions-101/" rel="nofollow">here</a> (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code:</p>
  
  <pre><code>a.menulink
  {
  text-decoration: none;
  color: #000000;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  transition: background-color .15s linear .1;
  }
  
  a.menulink:hover
  {
  text-decoration: none;
  color: #FFFFFF;
  background-color: rgb(255,24,24);
  -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
  }
  </code></pre>
  
  <p>thank you before</p>