Sliding divs not sliding back up after sliding down

Sliding divs not sliding back up after sliding down

I have the following layout for my page in ASP.NET:

<div id="content">
         <div id="leftnavcover" class="leftnavcover"></div>
            <asp:PlaceHolder ID="ph_leftnav" runat="server">
               <div class="leftnav" id="leftnav">
                  <asp:Repeater runat="server" ID="rptr_LeftNav">
                  <HeaderTemplate>
                     <ul>
                  </HeaderTemplate>
                  <ItemTemplate>
                        <li>
                           <asp:HyperLink ID="hyp_LeftNav" runat="server" CssClass="LeftNavLink" />
                           <div class="leftnavmenu" runat="server">
                              <asp:Repeater ID="rptr_LeftNavMenu" runat="server">
                                 <HeaderTemplate>
                                    <ul>
                                 </HeaderTemplate>
                                 <ItemTemplate>
                                       <li>
                                          <asp:HyperLink ID="hyp_LeftNavMenu" runat="server" CssClass="MenuLink"/>
                                       </li>
                                 </ItemTemplate>
                                 <FooterTemplate>
                                    </ul>
                                 </FooterTemplate>
                              </asp:Repeater>
                           </div>
                        </li>
                  </ItemTemplate>
                  <FooterTemplate>
                     </ul>
                  </FooterTemplate>
               </asp:Repeater>
               </div>            
            </asp:PlaceHolder>         
         <div class="rightcontent" id="rightcontent">                     
            <asp:ContentPlaceHolder id="_body" runat="server">               
            </asp:ContentPlaceHolder>                     
         </div>         
      </div>



Which renders the following HTML:

<div id="content">
  <div id="leftnavcover" class="leftnavcover"/>
    <div id="leftnav" class="leftnav" style="left: 0px;">
      <ul>
        <li>
          <a id="ctl00_rptr_LeftNav_ctl01_hyp_LeftNav" class="LeftNavLink" href="services-subsection-1">
            Services Subsection 1
          </a>
          <div class="leftnavmenu" style="display: block;">
            <ul>
              <li>
                <a id="ctl00_rptr_LeftNav_ctl01_rptr_LeftNavMenu_ctl01_hyp_LeftNavMenu" class="MenuLink" href="services-subsection-1/services-ss1-page-1.aspx">
                  Services SS1 Page 1
                </a>
              </li>
              <li>
                <a id="ctl00_rptr_LeftNav_ctl01_rptr_LeftNavMenu_ctl02_hyp_LeftNavMenu" class="MenuLink" href="services-subsection-1/services-ss1-page-2.aspx">
                  Services SS1 Page 2
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a id="ctl00_rptr_LeftNav_ctl02_hyp_LeftNav" class="LeftNavLink" href="services-subsection-2">
            Services Subsection 2
          </a>
          <div class="leftnavmenu">
            <ul>
              <li>
                <a id="ctl00_rptr_LeftNav_ctl02_rptr_LeftNavMenu_ctl01_hyp_LeftNavMenu" class="MenuLink" href="services-subsection-2/services-ss2-page-1.aspx">
                  Services SS2 Page 1
                </a>
              </li>
              <li>
                <a id="ctl00_rptr_LeftNav_ctl02_rptr_LeftNavMenu_ctl02_hyp_LeftNavMenu" class="MenuLink" href="services-subsection-2/services-ss2-page-2.aspx">
                  Services SS2 Page 2
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a id="ctl00_rptr_LeftNav_ctl03_hyp_LeftNav" class="LeftNavLink" href="services-page-1.aspx">
            Services Page 1
          </a>
          <div class="leftnavmenu" style="display: block;">
          </div>
        </li>
      </ul>
    </div>
  </div
</div>


And I have the following JQuery script:

$(document).ready(function() {
    $("a.LeftNavLink").mouseover(function() {
    $(this).next("div.leftnavmenu").slideDown(500).siblings("div.leftnavmenu").slideUp("slow");
    });
});


The problem is that when I bring my mouse on top of one of the .LeftNavLink's, it slides down the corresponding .leftnavmenu, but it doesn't slide the sibling divs back up when you put your mouse on top of another .LeftNavLink, which is what it is supposed to do.


Anyways, I got this code from:
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

Any help would be appreciated. Thanks.