html - Element on my website overlaps on menu -

as can see countdown seems appear on-top of navigation when drops down social icons.

i wondering how able make countdown goes hidden under nav dropdown.

see image below of mean >

html source code above image

<!-- navigation --> <div class="navigation-top"> <nav class="cbp-hsmenu-wrapper animated fadein" id="cbp-hsmenu-wrapper">     <div class="cbp-hsinner">     <ul class="cbp-hsmenu">       <li>         <a href="#">connect</a>         <ul class="cbp-hssubmenu">           <li><a href="#"><img src="facebook-square.svg" alt="img01"/><span>facebook</span></a></li>           <li><a href="#"><img src="youtube.svg" alt="img02"/><span>youtube</span></a></li>           <li><a href="#"><img src="twitter.svg" alt="img03"/><span>twitter</span></a></li>           <li><a href="#"><img src="googleplus-square.svg" alt="img04"/><span>google plus</span></a></li>           <li><a href="#"><img src="mail.svg" alt="img05"/><span>email</span></a></li>           <li><a href="#"><img src="tumblr.svg" alt="img06"/><span>tumblr</span></a></li>         </ul>       </li>       <li>         <a href="#">supporters</a>         <ul class="cbp-hssubmenu">           <li><a href="#"><img src="images/1.png" alt="img01"/><span>delicate wine</span></a></li>           <li><a href="#"><img src="images/2.png" alt="img02"/><span>fine spirit</span></a></li>           <li><a href="#"><img src="images/3.png" alt="img03"/><span>heavenly ale</span></a></li>           <li><a href="#"><img src="images/4.png" alt="img04"/><span>juicy lemonade</span></a></li>           <li><a href="#"><img src="images/5.png" alt="img05"/><span>wise whiskey</span></a></li>           <li><a href="#"><img src="images/6.png" alt="img06"/><span>sweet rum</span></a></li>         </ul>       </li>       <li>         <a href="#">contact us</a>         <ul class="cbp-hssubmenu">           <li><a href="#"><img src="images/1.png" alt="img01"/><span>delicate wine</span></a></li>           <li><a href="#"><img src="images/2.png" alt="img02"/><span>fine spirit</span></a></li>           <li><a href="#"><img src="images/3.png" alt="img03"/><span>heavenly ale</span></a></li>           <li><a href="#"><img src="images/4.png" alt="img04"/><span>juicy lemonade</span></a></li>           <li><a href="#"><img src="images/5.png" alt="img05"/><span>wise whiskey</span></a></li>           <li><a href="#"><img src="images/6.png" alt="img06"/><span>sweet rum</span></a></li>         </ul>       </li>       <li>         <a href="#">take part</a>         <ul class="cbp-hssubmenu">           <li><a href="#"><img src="images/1.png" alt="img01"/><span>delicate wine</span></a></li>           <li><a href="#"><img src="images/2.png" alt="img02"/><span>fine spirit</span></a></li>           <li><a href="#"><img src="images/3.png" alt="img03"/><span>heavenly ale</span></a></li>           <li><a href="#"><img src="images/4.png" alt="img04"/><span>juicy lemonade</span></a></li>           <li><a href="#"><img src="images/5.png" alt="img05"/><span>wise whiskey</span></a></li>           <li><a href="#"><img src="images/6.png" alt="img06"/><span>sweet rum</span></a></li>         </ul>       </li>           <li><a href="#">our mission</a></li>           <li><a href="#">contact</a></li>     </ul>   </div> </nav> </div>  <!-- snowdens birthday countdown 21st june -->  <div id="h">   <div class="container centered">     <div class="row">       <div class="col-md-8 col-md-offset-2">         <h1 class="top-text animated flash">sunday <b>21st june</b> 2015</h1>       </div>     </div><!--/row-->      <div class="row">       <!-- animate text zoomin -->       <ul id="example" class="animated zoomin">         <li><span class="days">00</span><p class="days_text">days</p></li>           <li class="seperator">:</li>         <li><span class="hours">00</span><p class="hours_text">hours</p></li>           <li class="seperator">:</li>         <li><span class="minutes">00</span><p class="minutes_text">minutes</p></li>           <li class="seperator">:</li>         <li><span class="seconds">00</span><p class="seconds_text">seconds</p></li>       </ul>       <!-- animate text end -->        <script type="text/javascript">       $('#example').countdown({       date: '6/21/2015 15:01:00',       offset: -8,       day: 'day',       days: 'days'       }, function () {       alert('happy birthday snowden!');       });       </script>      </div>   </div><!--/container--> </div><!--h--> 

if need more information please ask cause need fixing this.

unforantly don't know how using simple css instead i;

step 1 change timers div from;

<div class="container centered"> 

to

<div class="container centered" id="timerbox"> 

step 2 add new class of nav's links 'onclick'

<a class="onclick" href="#">connect</a> 

step 3 jquery below page

$(".onclick").click(function(){         $("#timerbox").css("padding-top", "250px");         $("#timerbox").css("transition", "all 1s");     }); 

now when click on tab move timer down , expand grey box surrounding it.

edit

i have noticed page changes image height when re-sized here jquery change amount moves based on that.

$(".onclick").click(function(){     var height = $(".cbp-hssubmenu").height();     var minheight = 100;      var move = height - minheight;      console.log(move);         $("#timerbox").css("padding-top", move);         $("#timerbox").css("transition", "all 1s");     });