Responsive Navigation bar Multimenu - mobile

Question

I have a horizontal navigation bar that collapses into a dropdown menu for mobile devices. My problem is the sub menu for the 'Portfolio' item doesn't redirect to the link in mobile device, but it does when the view is full width. It works when no link is assigned but as soon as a link is added the mobile device view becomes unclickable.
Any help is greatly appreciated.
Thanks
<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>Weddings</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>Weddings</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>