我网站上的元素重叠在菜单

Question

正如您所看到的，倒计时似乎出现在导航的顶部，当它与社交图标一起下降时。

我想知道我是如何制作的，所以倒计时会隐藏在导航下拉列表中。

看看我的意思如下＆gt;

来自上图的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");
    });

现在当你点击一个标签时，它会向下移动计时器并展开它周围的灰色框。

修改

我刚刚注意到页面在重新调整大小时会改变图像高度，所以这里是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");
    });