title: CSS - Move menu to top on hover
body: <p>I have a menu that is needed to move an item to top on hover, but it doesn't work. Here is what I do.</p>
  
  <pre><code>.menu li{
      display: inline-block;      
  }    
  
  .menu li a{
      display: block; 
      line-height: 20px;
      padding: 0 20px;
      border-bottom: 5px solid #000000;   
  
  }
  
  .menu li a:hover{
      margin-top: -5px;
      border-bottom-width: 10px;
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;li class="active"&gt;                             
      &lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;                                
      &lt;a href="#"&gt;About&lt;/a&gt;
  &lt;/li&gt;               
  &lt;li&gt;                                
      &lt;a href="#"&gt;Contact&lt;/a&gt;
  &lt;/li&gt;                   
  </code></pre>
  
  <p></p>