title: How to Animate Text to Left on Hover on Table-Cell List Items?
body: <p>I'm not sure if it's even possible, but here's what I'm trying to accomplish:</p>
  
  <p>I want to have CSS nav-menu with unequal width between list items. The only way I found to do it is using table-cell. However, once hovered, I'd like to play animation: </p>
  
  <ol>
  <li>list-item expands downwards</li>
  <li>text moves to the left</li>
  <li>font symbol appears from top in a middle. (don't have it yet)</li>
  </ol>
  
  <p>all at the same time.</p>
  
  <p>Similar to this button:
      <code>enter code here</code><a href="http://codepen.io/Savantos/pen/mHIpt" rel="nofollow">http://codepen.io/Savantos/pen/mHIpt</a></p>
  
  <p>However I can't make it happen.So far I can only make list item expand downwards:
      <code>enter code here</code><a href="http://jsfiddle.net/reizer/tekh8vrm/" rel="nofollow">http://jsfiddle.net/reizer/tekh8vrm/</a></p>
  
  <p>It seems in order to make text move left without affecting the whole cell is by using absolute position. But in that case, it makes all cell width equal width. I've tried with several div's inside a cell (giving specific px width to them) and they all stretch width of cells equally. Bummer.</p>
  
  <p>If I do padding-right w/o absolute positioning, it stretches the whole cell, making it goofy looking.</p>
  
  <p>I don't understand how to have table-cell item and inside it have absolute positioned items that act the way I want them without affecting cells. Maybe there's another way to move text without affecting cell width at all.</p>
  
  <p>***** UPDATE *****</p>
  
  <p>So I messed around with negative margins a bit and got smooth text positioning left on hover, but as long as I float div elements, I can't get them to expand smoothly as in previous example:</p>
  
  <p><a href="https://jsfiddle.net/reizer/uozkehad/" rel="nofollow">https://jsfiddle.net/reizer/uozkehad/</a></p>