title: Changing menu styles using jQuery and master pages in ASP .NET
body: <p>I have created a vertical menu on a ASP.NET master page using jQuery. Here are some items to consider:</p>
  
  <ul>
  <li>The menu structure is based on ordered lists . List items have nested items (UL) containing sub-menu options.</li>
  <li>All sub-menus must appear collapsed when the page is loaded. This is easily done by having display: none for the sub-menu style rule. However, this web site is supposed to run even when Java Script is disabled. So I thought I would se the sub-menu rule style to display: block and change the display back to 'none' during $(document).ready(function ()). So if JavaScript is disabled the menu will appear with all sub-menu items already expanded.</li>
  </ul>
  
  <p>The problem:
  Currently when JavaScript is enabled, the page is loaded with all sub-menu options expanded and then after jQuery ready method is run the sub-menu are collapsed using:</p>
  
  <pre><code>$('.menu li &gt; .sub-menu').hide(); 
  </code></pre>
  
  <p>I would like to show the page with all sub-menu items already collapsed and avoid the collapsing of sub-menu items after the page is loaded. How can I achieve that?  </p>
  
  <p>Thank you</p>