title: JS using onclick event on li to display block
body: <p>HTML:</p>
  
  <pre><code>&lt;script&gt;function dropdown()
  {        console.getElementById("").style.display="block";
  }&lt;/script&gt;
  &lt;div id="dropdown"&gt;
      &lt;ul&gt;
          &lt;li onclick="dropdown()"&gt;&lt;a&gt;Menu&lt;/a&gt;
               &lt;ul id="Menuitems"&gt;
                   &lt;li&gt;&lt;a href=""&gt;item 1&lt;/a&gt; &lt;/li&gt;
                   &lt;li&gt;&lt;a href=""&gt;item 2&lt;/a&gt; &lt;/li&gt;
                   &lt;li&gt;&lt;a href=""&gt;item 3&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#dropdown ul{
   display: block; 
  }
  #dropdown ul li {
       display: block;
       background-color: #558c89;
       color: #ffffff; 
  }
  #dropdown ul li ul {
       display: none; 
  }
  #dropdown ul li:hover &gt; ul { /*this is what the onclick event should do*/
       display: block; 
  }
  </code></pre>
  
  <p>The onclick should start the function "dropdown()" which needs to: "display: block;" on #dropdown ul li</p>