javascript - How can I create a drop down menu with JQuery -

i found fiddle has functionality want. however, i'm not sure how adjust code (css) drop down menu links.

when click on = want menu drop down. original code works clicking on parent , showing child links. assume work instance not sure how.

what want accomplish clicking = drops item 1 , item 2. otherwise hidden.

html

<!-- original code --> <ul id="nav">     <li>home</li>     <li class="parent">about         <ul class="sub-nav">             <li>johnny</li>             <li>julie</li>             <li>jamie</li>         </ul>     </li>     <li>contact</li> </ul>  <!-- code --> <div class="header-nav">   <nav class="nav-menu">     <ul>         <li>item 1</li>         <li>item 2</li>      </ul>   </nav>    <a href="#" id="menu-icon"></a> </div> 

js

$(document).ready(function() {     $('.parent').click(function() {         $('.sub-nav').toggleclass('visible');     }); });  // rename js use id/class script 

the jsfiddle here https://jsfiddle.net/crsze/982/

you have update click event in jquery work clicking menu icon. works:

$(document).ready(function() {     $('#menu-icon').click(function() {         $('.nav-menu ul').toggleclass('visible');     }); }); 

edit requested via comments, have menu appear below menu icon have reposition menu icon above ul so:

<div class="header-nav">   <a href="#" id="menu-icon"></a>   <nav class="nav-menu">     <ul>         <li>item 1</li>         <li>item 2</li>      </ul>   </nav> </div> 

and working fiddle