响应式导航栏Multimenu

Question

我有一个水平导航栏，可以折叠到移动设备的下拉菜单中。我的问题是＆＃39;投资组合的子菜单。 item不会重定向到移动设备中的链接，但会在视图为全宽时执行。它在没有分配链接时起作用，但是一旦添加链接，移动设备视图就变得不可点击。

非常感谢任何帮助。

由于

＆＃13;

＆＃13;

<style>
* {
  margin: 0;
  padding: 0;
}

body, html {
  font-family: segoe ui;
  font-size: 100%;
  height: 100%;
}

/* ****************************************************
                        CONTAINER
******************************************************/
.container {
  background: #FFF;
  min-height: 100%;
  overflow: auto;
}

/* ENLACES */
a {
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  transition: background-color .16s ease-in;
}

a:hover {
  background-color: #CD5C5C;
}

/* **************************************************
                      MENU NORMAL
****************************************************/

.navbar-menu {
  background-color: #F08080;
  margin: 2% auto;
  max-width: 1000px;
  width: calc(100%);
}

.navbar-menu .menu {
  display: block;
  text-align: center;
}

.navbar-menu .menu li {
  display: inline-block;
}

.navbar-menu .menu li:hover > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-menu .menu li ul {
  background-color: #f08080;
  display: none;
  position: absolute;
}

.navbar-menu .menu li ul li {
  display: block;
}

.navbar-menu .menu li ul li a:active {
  -webkit-animation-name: hideSubMenu;
  -webkit-animation-duration: .4s;
}

/******************************************************
                        MINI MENU
******************************************************/
/* Mini menu */
.navbar-mini-menu {
  background-color: #f08080;
  display: none;
}

.navbar-mini-menu .menu-select {
  color: #fff;
  padding: 1rem 1.5rem;
}

.navbar-mini-menu .menu-select .btn-select {
  background: url("icon.png") no-repeat;
  cursor: pointer;
  position: absolute;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
}

.navbar-mini-menu .mini-menu-options {
  display: block;
}

.navbar-mini-menu .mini-menu-options li {
  display: block;
}

.navbar-mini-menu .mini-menu-options li .submenu {
  display: none;
}


.navbar-mini-menu .mini-menu-options li:focus {
  outline: 0;
}

.navbar-mini-menu .mini-menu-options li:focus > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-mini-menu .mini-menu-options li a {
  display: block;
  padding: 1rem 1.5rem;
}


@-webkit-keyframes showSubMenu {
    0% {
      transform: scale(0,0);
    }
  100% {
    transform: scale(1,1);
  }
}

@-webkit-keyframes hideSubMenu {
  0% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0,0);
  }
}

/*****************************************************     
                  MEDIAQUERIES
*****************************************************/
@media screen and (max-width: 750px) {

  .navbar-menu {
    margin: 0;
  }

  .navbar-menu .menu {
    display: none;
  }
  
  
  

  .navbar-mini-menu {
    display: block;
  }
  
 
  .navbar-mini-menu .mini-menu-options {
    display: none;
  }
 
  
}

</style>

＆＃13;

<main class="container">
  <header>
    <nav class="navbar-menu">
      
      <!-- Menu normal -->
      <ul class="menu">
  <li><a>Home</a> </li>
  <li><a>Portfolio</a>
    <ul class="submenu">
      <li><a href="http://www.google.co.uk">Weddings</a></li>
      <li><a>Other Work</a></li>
    </ul>
  </li>
  <li><a>Rates</a></li>
  <li><a>Shop</a></li>
  <li><a>Contact</a></li>
    </ul>
 
      
      <!-- Mini Menu -->
      <nav class="navbar-mini-menu">
        <div class="menu-select">
          <span class="menu-actual">
            Menu
          </span>
          <span class="btn-select">
            
          </span>
        </div>
        <ul class="mini-menu-options">
          <li><a>Home</a></li>
          <li tabIndex="0"><a>Portfolio</a>
            <ul class="submenu">
              <li><a href="http://www.google.co.uk">Weddings</a></li>
              <li><a>Other Work</a></li>
            </ul>
          </li>
          <li tabIndex="0"><a>Rates</a></li>
          <li tabIndex="0"><a>Shop</a></li>
          <li tabIndex="0"><a>Contact</a></li>
          
        </ul>
      </nav> 
      
    </nav>
  </header>
  

</main>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).on("ready",function() {
  // 0 = hide, 1 = visible
  var menuState = 0;
  //if($(".mini-menu-options").is(":hidden")) {
    /* Add a Click event listener to btn-select */
    $(".btn-select").on("click",function() {
      if(menuState === 0) {
        $(".mini-menu-options").slideDown("slow");
        menuState = 1;
      } else {
        $(".mini-menu-options").slideUp("slow");
        menuState = 0;
      }
    });
  //}
  $(".mini-menu-options li").on("click", function() {
    var numHijos = $(this).children().length;
    if(numHijos < 2) {
      // hide the menu
      $(".mini-menu-options").hide("fast");

      var texto = $(this).text();

      $(".menu-select .menu-actual").text(texto);
    }
    menuState = 0;
  });
});
</script>

＆＃13;

＆＃13;

＆＃13;