JP SURFING TEMPLATE Make accordion menu

Hello,
I've bought jpsurfing template and i would like to know if i can configure or create an accordion menu. Actually, i've created one but is not accordion, we can see all under links without cliking or rollover.

Two examples in images under, first the menu i have, the second the menu i would like to have.





Please help me!
Thanks
DAVID

Hello,
1.) Accordion menu is only availabe for the menu published on sidebars and not for main menu
2.) You can setup maybe a 3rd level menu, therefore you have to add this code below to your css/custom.css

.uk-nav-navbar > .uk-parent > .uk-nav-sub { display: none; }

.uk-nav-navbar > .uk-parent > a:after {
content: "\f107";
font-family: "FontAwesome";
display: block;
float: right;
}

.uk-nav-navbar > .uk-parent:hover > .uk-nav-sub {
display: block;
background: none repeat scroll 0 0 padding-box #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
width: 200px;
margin-top: -5px;
padding: 15px;
position: absolute;
left: 150px;
}