title: jQuery horizontal slide toggle navigation
body: <p>I'm looking to make a simple nested navigation menu that "slides" or "flys" out horizontally-left on hover. I assume the only way to achieve this is with jQuery so I have been playing around with it.</p>
  
  <p><strong>Initial State</strong></p>
  
  <p><img src="https://i.stack.imgur.com/NURrU.png" alt="enter image description here"></p>
  
  <p><strong>Hover State</strong></p>
  
  <p><strong>EDIT:</strong> I realize this picture looks a bit wrong. I want the entire ul.sub-menu (ie: PEOPLE &amp; APPROACH) to slide out together, not sequentially.</p>
  
  <p><img src="https://i.stack.imgur.com/8zvnW.jpg" alt="enter image description here"></p>
  
  <p>The general structure is:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
      &lt;li&gt;ABOUT
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;PEOPLE&lt;/li&gt;
              &lt;li&gt;APPROACH&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;PROJECTS&lt;/li&gt;
      &lt;li&gt;CONTACT&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My jQuery is:</p>
  
  <pre><code>$("nav li").on('hover', function(){
      $(this).children(".sub-menu").animate({width: 'toggle'});
  });
  </code></pre>
  
  <p>Currently my li's are floated.</p>
  
  <p>My issue is when I hover over the parent LI, the .sub-menu fades in but is down a line and everything is jumping around due to floats. </p>
  
  <p>Can someone point me in the right direction?</p>