title: hide ul on page load
body: <p>I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever. </p>
  
  <p>I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.</p>
  
  <p>I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite.com would be the index, and then when I go to another page it is mysite.com#!second-page.html</p>
  
  <p>How would I hide a ul in a menu when the page loads?
  This is my html</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#"&gt;Tester&lt;/a&gt;
      &lt;ul class="menu-hide"&gt;
         &lt;li &gt;&lt;a href="#!pay-as-you-go.html"&gt;&lt;span class="title"&gt;PAY AS YOU GO&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li &gt;&lt;a href="#!affordable-holidays.html"&gt;&lt;span class="title"&gt;AFFORDABLE HOLIDAYS ALWAYS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li &gt;&lt;a href="#!how-points-work.html"&gt;&lt;span class="title"&gt;HOW POINTS WORK&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li &gt;&lt;a href="#!more-than-a-room.html"&gt;&lt;span class="title"&gt;MORE THAN A ROOM&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>This is the javascript I have found that is close to what I want:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;$("div.menu-hide").hide()&lt;/script&gt;
  </code></pre>
  
  <p>But I can't seem to target ul.menu-hide. I have tried this</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;$("ul.menu-hide").hide()&lt;/script&gt;
  </code></pre>