title: jquery show/hide breaks links
body: <p>I'm making a vertical navigation menu using css and jquery to make the submenus hidden by default but clicking on a menu item expands it to show the submenus.</p>
  
  <pre><code>&lt;div id="navmenu"&gt;
  
  
  &lt;ul id="menu"&gt;
    &lt;li&gt;&lt;a href="welcome.html" target="content"&gt;Welcome&lt;/a&gt;
      &lt;ul class="hide"&gt;
       &lt;li&gt;&lt;a href="other.php" target="content"&gt;blank&lt;/a&gt; &lt;/li&gt;    
      &lt;/ul&gt;  
    &lt;/li&gt;
  
    &lt;li&gt;&lt;a href="view_form.php" target="content"&gt;Student Nurse&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.google.com" target="content"&gt;Internet&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://support.site" target="content"&gt;Support&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Policies&lt;/a&gt;
     &lt;ul class="hide"&gt;
      &lt;li&gt;&lt;a href="shared/Policies/ContactList.txt" target="content"&gt;Policy 1&lt;/a&gt;&lt;/li&gt;   
     &lt;/ul&gt;  
    &lt;/li&gt;  
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the jquery to make the submenus hide and show:</p>
  
  <pre><code>$('#menu li').css("margin-left","20px");
  
  $('#menu li').toggle(
   function() {
              $(this).find('ul').show();
       },
       function() {
             $(this).find('ul').hide();
   });
  </code></pre>
  
  <p>This code works perfectly for expanding and collapsing the submenus, however, none of the links work now? I don't understand what I'm missing?</p>
  
  <p>edit: firebug output:</p>
  
  <pre><code>&lt;div id="navmenu"&gt;
     &lt;ul id="menu"&gt;
      &lt;li style="margin-left: 20px;"&gt;
         &lt;a target="content" href="welcome.html"&gt;Welcome&lt;/a&gt;
         &lt;ul class="hide"&gt;
           &lt;li style="margin-left: 20px;"&gt;
              &lt;a target="content" href="view_form.php"&gt;a blank one here&lt;/a&gt;
           &lt;/li&gt;
         &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li style="margin-left: 20px;"&gt;
           &lt;a target="content" href="view_form.php"&gt;Student Nurse&lt;/a&gt;
       &lt;/li&gt;
       &lt;li style="margin-left: 20px;"&gt;
          &lt;a target="content" href="http://www.google.com"&gt;Internet&lt;/a&gt;
       &lt;/li&gt;
       &lt;li style="margin-left: 20px;"&gt;
         &lt;a target="content" href="http://support.site"&gt;Support&lt;/a&gt;
       &lt;/li&gt;
       &lt;li style="margin-left: 20px;"&gt;
          &lt;a href=""&gt;Policies&lt;/a&gt;
          &lt;ul class="hide"&gt;
            &lt;li style="margin-left: 20px;"&gt;
              &lt;a target="content" href="shared/Policies/ContactList.txt"&gt;Policy 1&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>so the links are correct even when the submenu's are expanded but they are still broken.</p>