Element on my website overlaps on menu

Question

As you can see the countdown seems to appear on-top of the navigation when It drops down with the social icons.

I was wondering how I am able to make It so the countdown goes hidden under the nav dropdown.

SEE IMAGE BELOW OF WHAT I MEAN >

HTML Source code from 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 you need more Information then please ask cause I need help fixing this.

Answer 1

Unforantly I don't know how to do it using simple CSS but instead I;

Step 1 Change the timers div from;

<div class="container centered">

To

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

Step 2 Add a new class to all of the nav's links with 'onclick'

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

Step 3 Finally the jQuery below into your page

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

Now when you click on a tab it will move the timer down and expand the grey box surrounding it.

EDIT

I have just noticed that the page changes image height when re-sized so here is the jQuery which will change the amount it 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");
    });