title: How to change visibility with onclick
body: <p>Hi I'm new to Javascript and since there is no <code>onclick</code> for css I need a little help.  </p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;div id="dropnav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;Navigation&lt;/a&gt; 
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="Paintings.html"&gt;Paintings&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="Contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="Bio.html"&gt;Bio&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css:</p>
  
  <pre><code>#dropnav {
  position:relative;
  z-index:100;
  top:-60px;
  left:18%;
  background-size:18%;
  
  }
  #dropnav ul {
  padding:0px;
  margin:0px;
  
  }
  
  #dropnav ul li {
  display:inline;
  float:left;
  width:68.5%;
  list-style-type:none;
  border-style:solid;
  border-width:1px;
  font-family:arial;
  height:50px;
  
  }
  
  #dropnav ul li a {
  background-color:#808080;
  color:#FFFFFF;
  text-decoration:none;
  line-height:50px;
  display:block;
  padding-left:36.2%;
  width:63.8%;
  }
  
  #dropnav ul li a:hover {
  background-color:#666666;
  }
  
  #dropnav ul li ul li {
  width:99.8%;
  
  }
  #dropnav ul li ul li a{
  background-color:#666666;
  }
  #dropnav ul li ul li a:hover {
  background-color:#333333;
  
  }
  
  #dropnav ul li ul {
  visibility:hidden;
  }
  
  #dropnav ul li:onclick ul {
  visibility:visible;
  }
  </code></pre>
  
  <p>Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help</p>