html5 - Navigations with dropdowns -

i'm stuck on 1 , use help. have code:

<nav>       <a class="opcion-1" title="opcion 1" href="#">quiénes somos</a>           <a href="#">link 1</a>           <a href="#">link 2</a>           <a href="#">link 3</a>       <a class="opcion-2" title="opcion 2" href="#">nuestro trabajo</a>       <a class="opcion-3" title="opcion 3" href="#">unac news</a>       <a class="opcion-4" title="opcion 4" href="#">cómo donar</a>       <a class="lupa" title="opcion 5" href="#"></a> </nav> 

css

nav {   display: flex;   justify-content: space-between;   background-color: #ccc;   margin-top: 10px; }  nav > {   text-decoration: none;   color: black;   font-family: gotham book;   text-align: center;   width: 20%;   border-right: 1px solid #b3b3b3;   padding-top: 15px;   padding-bottom: 15px; }  nav > .lupa {   background-image: url("http://i.imgur.com/kxm05cw.png");   background-repeat: no-repeat;   background-position: center; } nav a.opcion-1:hover {     background-image: url(http://i.imgur.com/jnbtq5a.png); }  nav > a:hover {   background-color: #ffb53a;   color: transparent;   background-repeat: no-repeat;   background-position: center; } 

what need link1 , others drop down when parent a selected. these drop down , reveal text inside. need able customize them well. can see need below.

i think looking built in jquery library. called accordion.

https://jqueryui.com/accordion/

here example of accordion.

<div id="accordion"> <a href="#one" class="first">recent posts</a> <div id="one">     info. </div>  <a href="#two">popular posts</a> <div id="two">     more info. </div>  <a href="#three">archived posts</a> <div id="three">     more info. </div> 

http://jsfiddle.net/edsilv/cgn4s8y7/