I wanted to make a navigation bar with an accordion style, just like this:

http://www.ordinarypeople.ca/

If you click an item, say "Categories", there appears the accordion. I want to implement this kind of navigation bar as well but as I inspected the element, it mainly uses a table instead of <ul> and I still have no idea how to do it plus it I think it also uses jQuery or javascript of some sort which I'm also a newbie with.

I tried copying the menu structure in http://www.ordinarypeople.ca/, so here:

<ul> <table width="100%"> <tbody width="100%"> <tr> <td valign="top" width="220px;"><font style="letter-spacing:3px; padding-left:50px; font-size:13px;padding-right:20px; font-weight:600; color:#000000;"><a href="http://www.ordinarypeople.ca" style="color:#fff; font-weight:600; font-size:13px;">ORDINARY PEOPLE</a></font></td> <td valign="top" width="90px"> <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox"> <label for="ac-1">ABOUT</label> <article class="ac-small"> <div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;"> <center>Alyssa Lau is the 23-year-old face and voice behind the Edmonton-based style blog, Ordinary People. A creative director, public relations coordinator, content developer, photographer, and entrepreneur, Alyssa is currently involved with various fashion-related projects after deciding against a postgraduate degree in Biochemistry. Since then, Alyssa has launched a women's sustainable and fair trade fashion e-commerce store that goes by the name of <u><a href="http://www.newclassics.ca" style="letter-spacing:1px; text-transform:Capitalize;padding:0px;color:#222;font-size:12px;" target="_blank">New Classics Studios</a></u>, which is proudly based in Edmonton. <br><br><a href="http://www.ordinarypeople.ca/2014/12/personal-blah-blah-blah-g.html" target="_blank"><b>READ MORE</b></a><br><br><a href="http://www.ordinarypeople.ca/p/ask-alyssa.html"><b>ASK ME QUESTIONS</b></a></center> </div> </article> </div> </section> </td> <td valign="top" width="90px"> <section class="ac-container"> <div> <input id="ac-2" name="accordion-2" type="checkbox"> <label for="ac-2">CONTACT</label> <article class="ac-medium"> <div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;"> <center> GENERAL ENQUIRIES<br> <font style="font-size:10px;"><a href="mailto:alyssa@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ALYSSA@ORDINARYPEOPLE.CA</a></font> <br><br> COMMERCIAL PROJECTS<br> <font style="font-size:10px;"><a href="mailto:eric@ordinarypeople.ca" style="letter-spacing:1px; text-transform:uppercase;padding:0px;color:#555;font-size:10px;">ERIC@ORDINARYPEOPLE.CA</a></font> </center> </div> </article> </div> </section> </td> <td valign="top" width="90px"> <section class="ac-container"> <div> <input id="ac-3" name="accordion-3" type="checkbox"> <label for="ac-3">SOCIAL</label> <article class="ac-large"> <div style="padding-left:200px;z-index:90; padding-top:30px;padding-right:200px;font-size:12px;letter-spacing:1px;"> <center> <div style="align:center"> <ul id="fnav"> <li><a class="ex1" href="https://twitter.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;color:#fff;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/twtr.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Twitter</a></li> <li><a class="ex2" href="http://facebook.com/ordinarypeople" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/fb.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Facebook </a></li> <li><a class="ex7" href="http://youtube.com/ordinarypeoplevid" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://i.imgur.com/r6gh7XZ.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-8px;" width="27px">YouTube </a></li> <li><a class="ex4" href="http://instagram.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"> <img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/insta.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Instagram </a> </li> <li><a class="ex6" href="http://pinterest.com/imalyssalau" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/pntrst.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px">Pinterest </a></li> <li><a class="ex3" href="https://www.bloglovin.com/blogs/ordinary-people-2697392" style="letter-spacing:2px; line-height:22px; font-weight:600;text-transform:uppercase;padding:0px;font-size:10px;" target="_blank"><img src="http://www.songofstyle.com/wp-content/themes/ponsonby/image/blog.png" style="-webkit-filter:invert(100%);filter: invert(100%);margin-bottom:-3px;" width="15px"> Bloglovin' </a></li> </ul> </div> </center> </div> </article> </div> </section> </td> <td valign="top" width="90px"><a href="http://www.newclassics.ca" style="font-weight:600; font-family: arial; letter-spacing;3px; font-size:11px; ;color:#666; align:center;" target="_blank">SHOP</a></td> <td valign="top" width="90px"> <section class="ac-container"> <div> <input id="ac-4" name="accordion-4" type="checkbox"> <label for="ac-4">CATEGORIES</label> <article class="ac-categories"> <div style="padding-left:200px; padding-top:30px;padding-right:200px;font-size:11px;letter-spacing:1px;"> <center><a href="http://www.ordinarypeople.ca/search/label/Outfits?max-results=9">WEARING</a><br><br> <a href="http://www.ordinarypeople.ca/search/label/Travel?max-results=9">TRAVEL</a><br><br> <a href="http://www.ordinarypeople.ca/search/label/Photoshoot?max-results=9">PHOTOSHOOTS</a><br><br> <a href="http://www.ordinarypeople.ca/search/label/Tutorial?max-results=9">TUTORIALS</a><br><br> <a href="http://www.ordinarypeople.ca/search/label/Video?max-results=9">VIDEO</a><br><br> <a href="http://www.ordinarypeople.ca/search/label/Beauty?max-results=9">HAIR AND BEAUTY</a><br><br> </center> </div> </article> </div> </section> </td> <td valign="top" width="150px"> <form action="/search" id="searchThis" method="get" style="display: inline; "><input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="border: 1px solid #bbbbbb; background: none;" type="text" value="" vinput=""> <input id="searchButton" type="submit" value="SEARCH"> </form> </td> </tr> </tbody> </table> <li><a href="#">_</a></li> </ul>

As what I've said, I still have no idea about the jQuery/javascript behind all this.

I am using this for a blog (Blogger), fyi. Hoping anybody can help.