drop down menu - Jquery toggleclass function only works on homepage -

i have menu has drop down sub menu hidden until user clicks on title.

the menu part of masterpage.master appears @ top of each webpage in website. on homepage, can click on menu title , sub menu drops down , can click on link. goes page listing departments when click on menu title (on departments page ie second page) sub menu not drop down.

i have tried narrow down problem, thought css on second page such div fixed have removed content second page , sub-menu still doesn't drop down.

the code below 1 of 3 menus on masterpage.master, 1 of menus work on next page following user clicking on title not why 1 works on menu below doesn't work.

please can tell me why code below works once homepage? have been trying narrow down issue weeks without success.

jquery in masterpage.master page

<script src="jquery.js" type="text/jscript"></script>      $(document).ready(function() {          $('.parent').click(function() {             $('.sub-nav').toggleclass('visible');         });     }); </script> 

menu (departmentlist.ascx)

<asp:repeater id="repeater1" runat="server"> <headertemplate> <ul id="nav">     <li class="parent">brands</headertemplate>  <itemtemplate>     <ul class="sub-nav">         <li>             <asp:hyperlink id="departmentroute" runat="server"       navigateurl='<%#: getrouteurl("departmentroute", new { departmentid =   eval("departmentid"), brandname = (eval("name").tostring().fixurl())})%>'    text='<%# eval("name") %>' cssclass='<%# eval("departmentid").tostring() ==    request.querystring["departmentid"] ? "departmentselected" :     "departmentunselected" %>'></asp:hyperlink>         </li>     </ul> </itemtemplate>    <footertemplate>    </li>  </ul> </footertemplate>  </asp:repeater> 

css code

#nav { list-style-type: none; margin: 0; padding: 0;  }  #nav li.parent { width: 100%; list-style-type: none; background-color: #333030; color: #ffffff;  }  #nav ul.sub-nav a:hover { /*list of departments*/ font-size: 0.8em; font-family: verdana; text-decoration: none; font-weight: bold; color: #000;  } #nav ul.sub-nav { font-size: 0.8em; font-family: verdana; text-decoration: none; color: #000; }  #nav ul.sub-nav { display: none; list-style-type: none; text-decoration: none; text-align: left; margin: 0 0 0 0; }  #nav ul.visible { display: block; list-style-type: none; padding: 0 0 5px 10px; text-decoration: none; line-height: 0.8em; background-color: #d3c4c4; border-bottom: solid 2px; border-bottom-color: #ffffff; } 

i have copied code page (catalog3.aspx) department menu goes homepage. departmentlist menu not expand show sub menu on page (catalog3.aspx).

 <%@ page title="lingerie-luxury" language="c#"      masterpagefile="~/masterpage.master" autoeventwireup="true"  codefile="catalog3.aspx.cs" inherits="catalog3" %>  <%@ register src="~/productlist.ascx" tagprefix="uc1"  tagname="productlist"%>  <asp:content id="content1" contentplaceholderid="head" runat="server"> </asp:content> <asp:content id="content2" contentplaceholderid="cpmaincontent"    runat="server"> <p class="producttitle"><asp:label id="departmenttitle" runat="server"     text=""></asp:label></p> <div class="dantest"> <br /> <br /> <h1 class="producttitle">testing </h1> </div> </asp:content> 

is there can explain why menu not expand on catalog3.aspx when click on menu title? suggestions received.