响应式导航栏多菜单

Question

我有一个水平导航栏，可以折叠到移动设备的下拉菜单中。 我的问题是，“ Portfolio”项的子菜单没有重定向到移动设备中的链接，但是当视图为全角时会出现。 当未分配任何链接但添加链接后，该移动设备视图便不可单击，它可以工作。

任何帮助是极大的赞赏。

谢谢

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

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