[jQuery] Submenu tonen na klik op hoofdmenu

Beste,

In een template die ik gecodeerd heb wil ik nu e.e.a. toevoegen. Zo is het de bedoeling dat als er een link wordt aangeklikt in het hoofdmenu, het submenu eronder verschijnt.

Is er iemand die dit voor mij kan uitschrijven in jQuery?

Wat heb ik nu?

Een element verborgen door een extra class verborgen toe te voegen, dus op deze manier:

<nav class="top">
                    <div class="container header">
                        <ul class="pull-left">
                            <li><a href="#" class="home"></a></li>
                            <li><a href="#">Menu1</a></li>
                            <li><a href="#">Menu2</a></li>
                            <li><a href="#">Menu3</a></li>
                            <li><a href="#">Menu4</a></li>
                        </ul>
                        <ul class="pull-right">
                            <li><a href="#">Beelden</a></li>
                            <li><a href="#">Pers</a></li>
                            <li><a href="#">Prestaties</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </nav>
                <nav class="topsub verborgen">
                    <div class="container header">
                        <ul>
                            <li><a href="#">Menu1-Sub1</a></li>
                            <li><a href="#">Menu1-Sub2</a></li>
                            <li><a href="#">Menu1-Sub3</a></li>
                            <li><a href="#">Menu1-Sub4</a></li>
                            <li><a href="#">Menu1-Sub5</a></li>
                        </ul>
                    </div>
                </nav>

Waarbij onderstaande CSS hoort:

nav.top { background: url("../images/navtopbg.png") repeat-x; height: 40px; margin-top: 8px; margin-bottom:5px; line-height: 40px;} 
nav.topsub { background: url("../images/navtopsubbg.png") repeat-x; height: 30px; line-height: 30px; }
nav { width: 100%; }
nav li { float: left; font-size: 14px; margin-right: 25px;}
nav li a.home{ text-indent: -999px; background: url("../images/icon-home.png") no-repeat; display: block; width: 20px; height: 19px; margin-top: 10px;}
nav li:last-child { margin-right: 0; }
nav li a { color: #fff; }
nav.topsub li a { color: #2b3688; }
.verborgen{ visibility: hidden; }

Ik hoop dat iemand mij hiermee kan helpen, alvast bedankt!

Hover is makkelijker dan click.. Hover kan je makkelijk met alleen css doen

Ja maar dan wordt het vrij lastig om per menu-item de juiste sub-items te tonen. Naar mijn idee gaat dat met JS makkelijker.

Dan moet je hem er gewoon goed onderzetten in 1 div..



Maar als je liever js wilt, is dat uiteraard aan jezelf om te beslissen