title: Using transition mouseout in css3
body: <p>I've been using transition to make simple menu "underline" (its actually <code>border-bottom</code>) transition, when it hover you will get <code>border-bottom</code> in action and you will see him pop out.
  However, there is a problem with transition "mouseout" effect, when I get my mouse off from  <code>li &gt; a:hover</code> it disappeares without any effect.</p>
  
  <p><strong>CSS3 Code:</strong></p>
  
  <pre><code>/*Menu*/
  #menu{
      float: right;
      margin: -60px 0px 0;
  }
  
  #menu ul{
      list-style-type:none;
  }
  
  #menu ul li{
      display: inline;
      padding-right: 20px;
  }
  
  #menu ul li a{
      display: inline-block;
      text-decoration: none;
      color: #a1a1a1;
      font-size: 19px;
      padding-bottom: 7px;
  }
  #menu li &gt; a:hover {
      transition: all 0.5s ease 0s;
      text-decoration: none;
      border-bottom: 1px solid #fff;
      padding-bottom: 2px;
  }
  </code></pre>
  
  <p><strong>Q:</strong> How can I get mouseout transition effect in css3?</p>
  
  <p><a href="http://jsfiddle.net/B6ceP/" rel="nofollow">http://jsfiddle.net/B6ceP/</a></p>