title: How can I get a reference to a child element in an unordered list
body: <p>I created a vertical menu using unordered list. Within the list, there are subitems that are not displayed until a click event. How do I get a reference to the first ul child element of an li element to change its display style from "none" to ""?  </p>
  
  <p>When I click on mnu03, how do I get a reference to mnu031. Right now I'm just adding a "1" to the parent id to create the id of the child, which is kludgy.</p>
  
  <p>I don't want to use jQuery.  </p>
  
  <p>The markup follow:</p>
  
  <pre><code>&lt;pre&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" id="mnu01" onclick="this"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="mnu02" onclick="this"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="mnu03" onclick="this"&gt;Item 3&lt;/a&gt;
           &lt;ul id="mnu031" style="display:none;" &gt;
               &lt;li&gt;&lt;a href="#" id="mnuSub031" onclick="this"&gt;Item S1&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#" id="mnuSub032" onclick="this"&gt;Item S2&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="mnu04" onclick="this"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="mnu05" onclick="this"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/pre&gt;
  </code></pre>