Элемент на моем веб-сайте перекрывается в меню

Question

Как вы можете видеть, обратный отсчет кажется сверху навигация, когда он падает с помощью социальных значков.

Мне было интересно, как я могу это сделать, поэтому обратный отсчет скрывается под выпадающим списком навигации.

SEE IMAGE НИЖЕ, ЧТО Я ИМЕЮ В ВИДУ>

HTML Исходный код с картинке

<!-- 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--> 

Если вам нужна дополнительная информация, пожалуйста, спросите, потому что я нужна помощь фиксируя это.

Answer 1

Непонятно, что я не знаю, как это сделать, используя простой CSS, но вместо этого я;

Шаг 1 Изменить таймеры div;

<div class="container centered"> 

Для

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

Шаг 2 Добавить новый класс для всех ссылок СЧА с 'OnClick'

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

Шаг 3 Наконец JQuery ниже на вашу страницу

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

Теперь, когда вы нажимаете на вкладку, она перемещает таймер вниз и расширяет серое поле вокруг него.

EDIT

Я только заметил, что страница изменения высоты изображения при повторном размере так вот JQuery, который изменит сумму, которую она перемещается на его основе.

$(".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"); 
    });