How can I use javascript, html and css to make an image a button, which can do the following?
<p>When it is clicked, it should open a drop down menu, containing links.
Please provide the full code as well.
Here is the code for the image/button that I have:</p>

<pre><code>&lt;div class="navBar"&gt;
&lt;img src="nav_icon.jpg" class="navButton" alt="Navigation Links"&gt;
&lt;div class="dropdown-content"&gt;
  &lt;a href="#"&gt;Home&lt;/a&gt;
 &lt;a href="#"&gt;Get Involved&lt;/a&gt;
    &lt;a href="#"&gt;About Us&lt;/a&gt;
    &lt;a href="#"&gt;Contact Us&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is the CSS part (which isn't really relevant:)</p>

<pre><code>.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.navButton{
    height:20px;
    width:20px;


}
.navBar{
    float:right;
    height: 10px;
    width:20%;
    padding-top:4.2%;
     position: relative;
    display: inline-block;
}
</code></pre>

<p>I've tried the following example, which instead of creating what I want, makes all the links appear:
<a href="http://www.w3schools.com/howto/howto_js_dropdown.asp" rel="nofollow">W3 Schools</a></p>