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

Question

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

我想知道我是怎么做到的，所以倒计时隐藏在导航下拉菜单下。

我的意思见下图>

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'

向所有导航链接添加新的 class

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

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

Element on my website overlaps on menu

html

navigation