setTimeout delay not functioning - what have I done wrong?
<p>I've put together a piece of code for a drop-down menu, bound to <code>.hover()</code>, however unfortunately the delay on <code>setTimeout()</code> doesn't seem to work and as soon as the mouse is moved from <code>.button</code>, it sets the display property of <code>#sub-nav</code> to <code>none</code>.</p>

<p>Dreamweaver CS 5.5 evaluates the syntax as correct :(.</p>

<p><strong>Here's my code:</strong></p>

<pre><code>function retract(){ $('#sub-nav').css('display', 'none'); }

$('#header-restrict &gt; .button').hover( function() {

  if($(this).html() == "Offers") {
      $('#sub-nav').css('display', 'block');
      $('#sub-nav').html('&lt;a href="#"&gt;Add a New Offer&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;a href="#"&gt;Edit an Offer&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;a href="#"&gt;Get Offer Links&lt;/a&gt;');
  }

  if($(this).html() == "Rotations") {
      $('#sub-nav').css('display', 'block');
      $('#sub-nav').html('&lt;a href="#"&gt;Add a New Rotation&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;a href="#"&gt;Edit a Rotation&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;a href="#"&gt;Get Rotation Links&lt;/a&gt;');
  }
}, function() { setTimeout(retract(), 4000); });
</code></pre>

<p>If anyone could comment on/answer as to why the delay doesn't seem to be working, it would be greatly appreciated!</p>
