title: css transitions pushing elements
body: <p>i am trying to make a new menu for my site and i'm using transitions on highlight. </p>
  
  <p>but i am getting some issues with elements being pushed around. for example if you highlight Home it will push all elements to right of it. 
  however if there are 2 lines it will not push the element down. instead it will just mask it. how can i make sure each element has it's own dedicated space and not be pushed and also not be masked. </p>
  
  <p>I tried making an absolute with an inner relative but that didn't work. </p>
  
  <p><a href="http://jsfiddle.net/yg68cnnt/" rel="nofollow">http://jsfiddle.net/yg68cnnt/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;ul&gt; 
      &lt;li&gt; Home &lt;/li&gt;
      &lt;li&gt; About &lt;/li&gt;
      &lt;li&gt; FAQ &lt;/li&gt;
      &lt;li&gt; Locations &lt;/li&gt;
      &lt;li&gt; StackOverflow &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul{
      list-style-type:none;
      position:absolute;
  }
  
  
  li{
      display:inline;
      transition: all 2s;
      width:0px;
      position:relative;
      margin-right:3em;
      padding-top:10px;
      padding-right:30px;
      padding-left:4px;
  }
  
  li:hover{
      background-color:red;
      border-right:20px solid black;
      border-bottom:20px solid black;
      border-bottom-right-radius:10px;
      border-top-left-radius:10px;
  }
  </code></pre>