title: Expanding menu shows text before expansion
body: <p>I have made an expanding menu that will be my navigation menu. When you run it the text is showing when it isn't expanded. This is what I don't want, I want it hidden until the menu is expanded. I have tried to use <code>overflow: hidden;</code> but it doesn't work.
  <a href="https://jsfiddle.net/somewhatme/wzfaozwe/1/" rel="nofollow">JSFidlle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="div1"&gt;Home&lt;/div&gt;&lt;br /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#div1{
      position: fixed;
      width: 0;
      height: 0;
      border-bottom: 50px solid black;
      border-right: 50px solid transparent;
      float: left;
      color: white;
      font-size: 20px;
      vertical-align: middle;
      line-height: 50px;
  }
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function() {
  
        $("#div1").hover(
          function() {
            $(this).animate({
              width: '+=800'
              }, 'slow'
            );
          },
          function() {
            $(this).animate({
              width: '-=800px'
              }, 'slow'
            );
          }
        );
  
      });
  </code></pre>