title: onclick event with ul li to fire a function
body: <p>I'm new to coding and I need help with adding an onclick event to my list (which is supposed to work as a drop-down menu)-</p>
  
  <p>This is the code for my list:</p>
  
  <pre><code>&lt;div class="click-nav"&gt;
  
  &lt;ul class="clicker"&gt;
  &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;shake&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;shrink&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;melt&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;disperse&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;     
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to make it so that when one of these items is selected, a function is fired (which calls a bunch of images specific to the category selected to be placed in a div).</p>
  
  <p>I've tried it also with the select option and it was working perfectly, but I have to change it because its stubborn design:</p>
  
  <pre><code>&lt;label&gt;
  &lt;select name="alphabets" id="typeface" onchange="myType();"&gt;
  &lt;option value="shake" selected&gt;shake&lt;/option&gt;
  &lt;option value="shrink"&gt;shrink&lt;/option&gt;
  &lt;option value="melt"&gt;melt&lt;/option&gt;
  &lt;option value="disperse"&gt;disperse&lt;/option&gt;
  &lt;option value="disintegrate"&gt;disintegrate&lt;/option&gt;
  
  &lt;/select&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>Thanks in advance for the help!</p>