透明的菜单响应性辅助菜单和连续菜单

Question

当我切换到一个很小的窗口时，响应式菜单出现问题，我显示了菜单，但是看到页面的内容突然无法单击链接。所以我找不到我犯错的地方。

谢谢

$(document).ready(function() {

    let menu = $('#menu');
    let navegation = $('#navegation');
    let scrollZero = 0;

  $('#icon-menu').on('click', function() {
    $(this).toggleClass('fa-times fa-bars');
    $('body').toggleClass('no-scroll-y');
    navegation.toggleClass('menu-active');
  });

  $('.submenu').on('click', function() {
    $(this).siblings('.submenu').children('.children').slideUp();
    $(this).siblings('.submenu').children('a').children('.caret').removeClass('rotate');
        $(this).children('a').children('.caret').toggleClass('rotate');
        $(this).children('.children').slideToggle();
    });

  $(window).on('click', function(e) {
    if (menu.has(e.target).length == 0 && !menu.is(e.target)) {
      $('.submenu').children('.children').slideUp();
      $('.submenu').children('a').children('.caret').removeClass('rotate');
      if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
        $('#icon-menu').trigger('click');
      }
    }
  });

  $(window).on('load scroll resize', function () {
    let positionScrollY = $(window).scrollTop();
      if (positionScrollY < scrollZero) {
        menu.removeClass('scroll-down');
      } else {
          $('.submenu').children('.children').slideUp();
          $('.submenu').children('a').children('.caret').removeClass('rotate');
          menu.addClass('scroll-down');
        }
      scrollZero = positionScrollY;
      if (positionScrollY == 0) {
        menu.removeClass('scroll-down');
      }
  });

  $(window).on('resize', function() {
    $('body').removeClass('no-scroll-y');

    if ($(this).width() > 900 && !navegation.hasClass('menu-active')) {
      $('#icon-menu').addClass('fa-bars').removeClass('fa-times');
      navegation.removeClass('menu-active');
    } else if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
        $('body').addClass('no-scroll-y');
      }
  });

});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
    outline: 0;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    background-color: #fefefe;
}

a {
    text-decoration: none;
}

/*------------------------------------*\
-------- Navigation
\*------------------------------------*/

.no-scroll-y {
  overflow-y: hidden;
}

header {
  background-color: #FFFFFF;
  background-image: url("images/noise.png");
  background-repeat: repeat;
  width: 100%;
  height: 54px;
}

.scroll-down,
.scroll-down .btn-menu {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

.menu-bar {
  display: none;
}

header nav::-webkit-scrollbar {
  width: 7px;
}

header nav::-webkit-scrollbar-thumb {
  background-color: rgba(77, 77, 77, 0.9);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset,
               0 -1px 0 rgba(255, 255, 255, 0.2) inset;
}

header nav {
  max-width: 1270px;
  height: 54px;
  margin: 0 auto;
}

.menu-active {
  opacity: 1;
  -webkit-transform: perspective(500px) rotateY(0deg);
          transform: perspective(500px) rotateY(0deg);
}

header nav ul {
  /*display: flex;
  justify-content: space-around;*/
  list-style: none;
}

header nav ul li {
  display: inline-block;
  position: relative;
}

header nav ul li a {
  color: #1D3B6A;
  display: block;
  padding: 16px 10px;
  font-family: 'Oswald';
  font-size: 1.2rem;
}

header nav ul li a:hover {
  color: #FC5342;
}

header nav ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

header nav ul li a:hover:before {
  visibility: visible;
  background-color: #1D3B6A;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

header nav ul li a span {
  margin-right: 10px;
}

header nav ul li .caret {
  margin: 0 0 0 10px;
  position: relative;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
}

header nav ul li .caret.rotate {
  -webkit-transform: rotateZ(-180deg);
          transform: rotateZ(-180deg);
}

header nav ul li .children {
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  min-width: 280px;
  right: 0;
  top: 70px;
  box-shadow: 0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);
  display: none;
  -webkit-animation: children .4s cubic-bezier(.7,.006,.2,1);
  animation: children .4s cubic-bezier(.7,.006,.2,1);
  -webkit-transform-origin: top right;
  transform-origin: top right;
  z-index: 10000;
}

@-webkit-keyframes children {
  from {
    -webkit-transform: translateY(-1rem) scale(.9);
    transform: translateY(-1rem) scale(.9);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes children {
  from {
    -webkit-transform: translateY(-1rem) scale(.9);
    transform: translateY(-1rem) scale(.9);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/*
header nav ul li:hover .children,
header nav ul li:focus .children,
header nav ul li:active .children {
  display: block;
}
*/

header nav ul li .children li {
  display: block;
  overflow: hidden;
}

header nav .right {
  float: right;
}

header nav ul li .children li a {
  display: block;
  color: #828282;
  font-size: 15px;
  padding: 10px;
  font-weight: 500;
  font-family: Roboto;
}

header nav ul li .children li a:hover {
  color: #AAB74E;
  font-size: 15px;
}

header nav ul li .children li a span {
  float: right;
  font-size: 0.5em;
  margin: 0 0 0 10px;
  position: relative;
  top: 5px;
}

/*------------------------------------*\
-------- Content
\*------------------------------------*/
.hita-main {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1270px;
}

#hita-top {
  padding-top: 40px;
}

.hita-row {
  margin-right: -15px;
  margin-left: -15px;
}

.hita-m-1,
.hita-m-2,
.hita-m-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 25px;
}

/*------------------------------------*\
-------- Responsive ( Min )
\*------------------------------------*/
@media (min-width: 320px) {
  .hita-main {
    max-width: 460px;
  }
}

@media (min-width: 576px) {
  .hita-main {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .hita-main {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .hita-main {
    max-width: 960px;
  }
}

@media (min-width: 1280px) {
  .hita-main {
    max-width: 1270px;
  }
  .hita-m-1, .hita-m-2, .hita-m-3 {
    float: left;
  }
  .hita-m-3 {
    width: 100%;
  }
  .hita-m-2 {
    width: 75%;
  }
  .hita-m-1 {
    width: 25%;
  }
}

/*------------------------------------*\
-------- Responsive ( Max )
\*------------------------------------*/
@media screen and (max-width: 900px) {
  .menu-bar {
    display: block;
    width: 100%;
  }
  .menu-bar .btn-menu {
    background-color: #FFFFFF;
    background-image: url("images/noise.png");
    background-repeat: repeat;
    color: #193767;
    cursor: auto;
    display: block;
    font: bold 25px 'Arial', sans-serif;
    left: 0;
    padding: 16px;
    position: relative;
    top: 0;
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
    width: 100%;
    z-index: 1;
  }
  .menu-bar .btn-menu span {
    cursor: pointer;
    float: right;
    font-size: 25px;
  }
  header nav {
    height: calc(100% - 69px);
    left: 0;
    margin: 0;
    opacity: 0;
    overflow: auto;
    position: fixed;
    top: calc(70px - 1px);
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: perspective(500px) rotateY(90deg);
            transform: perspective(500px) rotateY(90deg);
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
    width: 80%;
    background-color: #012345;
    background-image: url("images/noise.png");
    background-repeat: repeat;
  }
  header nav ul {
    /*flex-direction: column;*/
  }
  header nav ul li {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
    display: block;
  }
  header nav ul li .caret {
    float: right;
  }
  header nav ul li .children {
    display: none;
    position: relative;
    width: 100%;
    top: 0;
    border-radius: 0px;
    background-color: #FFFFFF;
    background-image: url("images/noise.png");
    background-repeat: repeat;
  }
  header nav ul li:hover .children,
  header nav ul li:focus .children,
  header nav ul li:active .children {
    display: none;
  }
  header nav ul li .children li a {
    margin-left: 20px;
  }
  header nav .right {
    float: left;
  }
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Menu dropdown</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/v4-shims.css">

</head>
<body>

  <header id="menu">
    <div class="menu-bar">
      <a href="javascript:void(0);" class="btn-menu">
      <span id="icon-menu" class="fa fa-bars"></span>
      </a>
    </div>
    <nav id="navegation">
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Lorem</a></li>
        <li class="submenu"><a href="#">Lorem</a>
          <ul class="children">
            <li><a href="#">Lorem #1</a></li>
            <li><a href="#">Lorem #2</a></li>
            <li><a href="#">Lorem #3</a></li>
            <li><a href="#">Lorem #4</a></li>
            <li><a href="#">Lorem #5</a></li>
          </ul>
        </li>
        <li class="submenu"><a href="#">Lorem</a>
          <ul class="children">
            <li><a href="#">Lorem #1</a></li>
            <li><a href="#">Lorem #2</a></li>
            <li><a href="#">Lorem #3</a></li>
            <li><a href="#">Lorem #4</a></li>
            <li><a href="#">Lorem #5</a></li>
          </ul>
        </li>
        <li class="submenu"><a href="#">Lorem</a>
          <ul class="children">
            <li><a href="#">Lorem #1</a></li>
            <li><a href="#">Lorem #2</a></li>
            <li><a href="#">Lorem #3</a></li>
            <li><a href="#">Lorem #4</a></li>
            <li><a href="#">Lorem #5</a></li>
          </ul>
        </li>
        <li class="right"><a href="#">Lorem</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- +++++ Section - Content +++++ -->
  <div class="hita-main" id="hita-top">
    <div class="hita-row">
      <div class="hita-m-2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      
      <!-- Menu Right -->
      <div class="hita-m-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>  
    </div>
  </div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

</body>
</html>

这是有人可以帮助我解释还是我弄错了，谢谢...

Answer 1

[尝试将z-index添加到导航链接以使其覆盖div。

header nav ul li a {
    color: #1D3B6A;
    display: block;
    padding: 16px 10px;
    font-family: 'Oswald';
    font-size: 1.2rem;
    z-index: 1;

请参见https://developer.mozilla.org/en-US/docs/Web/CSS/z-index