下拉菜单li:悬停停止工作，必须点击打开子菜单

我有一个响应式下拉菜单，有4个按钮，其中一个打开子菜单(投资组合)。它工作得很好，除了当我点击"投资组合"按钮(不应该被点击，因为它使用悬停功能)，它关闭子菜单，它不会打开或关闭，直到我再次点击该按钮。就像我说的，它不应该被点击，但这是一个可能发生的错误。

$(document).ready(main);
 
var contador = 1;
 
function main () {
	$('.bt-menu').click(function(){
		if (contador == 1) {
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});
 
	// Mostramos y ocultamos submenus
	$('.submenu').click(function(){
		$(this).children('.children').slideToggle();
	});
}

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.menu_bar {
	display:none;
}
header {
	width:100%;
}
header nav {
	z-index:1000;
	width:100%;
	margin:0 auto;
}
header nav ul {
	list-style:none;
}
header nav ul li {
	display:inline-block;
	position:relative;
}
header nav ul li a {
	color:white;
	display:block;
	text-decoration:none;
	padding:20px 20px 10px 20px;
}
header nav ul li:nth-child(3n+3) a {  
  color: #999;
}
header nav ul li .caret {
	position:relative;
	top:3px;
	margin-left:10px;
	margin-right:0;
}
header nav ul li:hover .children {
	display:block;
}
header nav ul li .children {
	display: none;
	position: absolute;
	background-color: white;
	width: 200%;
	z-index: 1000;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	letter-spacing: 0;
}
header nav ul li .children li {
	display:block;
	overflow:hidden;
	border-bottom:1px solid #E6E6E6;
	min-width:50%;
}
header nav ul li .children li:nth-child(odd) {
    float: left;
}
header nav ul li .children li:nth-child(even) {
    float: right;
}
header nav ul li .children li a {
	display:block;
	color:#111;
	padding:15px 25px;
}
header nav ul li .children li a:hover {
	background-color:#E6E6E6;
}
@media screen and (max-width: 800px) {
	body {
		padding-top:40px;
	}
	
	.menu_bar {
		display:block;
		width:100%;
		position:fixed;
		top:0;
		background:black;
		z-index:1100;
		background:green;
	}
	
	.menu_bar .menu-logo {
		display:block;
		padding:20px 20px 10px 20px;
		color:white;
		overflow:hidden;
		float:left;
		width:80%;
		font-size:24pt;
		letter-spacing:-2pt;
	}
	
	.menu_bar .bt-menu{
		display:block;
		padding:20px 20px 10px 20px;
		color:white;
		overflow:hidden;
		font-size:25px;
		text-decoration:none;
		float:right;
		width:20%
	}
	
	.menu_bar span {
		float:right;
		font-size:30px;
		position:relative;
	}
	
	header nav {
		width:85%;
		height:calc(100% - 67px);
		position:fixed;
		right:100%;
		margin:0;
		overflow:scroll;
		background:black;
	}
	
	header nav ul li {
		display:block;
		border-bottom:1px solid #111;
	}
	
	header nav ul li a {
		display:block;
	}
	
	header nav ul li .children {
		width:100%;
		position:relative;
	}
	
	header nav ul li .children li {
		display:block;
		overflow:hidden;
		border-bottom:1px solid #E6E6E6;
		min-width:100%;
	}
	header nav ul li .children li:nth-child(odd) {
    	float: none;
	}
	header nav ul li .children li:nth-child(even) {
    	float: none;
	}
	
	header nav ul li:hover .children {
		display:none;
	}
	
	header nav ul li .children li a {
		margin-left:;
	}
	
	header nav ul li .caret {
		float:right;
	}

<div id="header">
  <div id="header-logo">
    <div id="logo1"><a href="index.html" target="_self">ARMANDO</a></div>
    <div id="logo2"><a href="index.html" target="_self">RODRIGUEZ</a></div>
    <div class="fotografia" id="logo3"><a href="index.html" target="_self">fotografía</a></div>
  </div>
  
  <div id="header-menu">
  	<header>
    	<div class="menu_bar">
        	<div class="menu-logo">ar</div><a href="#" class="bt-menu"><span class="icon-diafragma"></span></a>
		</div>
            
		<nav>
			<ul>
            	<li class="submenu">
                	<a href="#">portafolio <span class="caret icon-dropdown"></span></a>
                    <ul class="children">
                    	<li><a href="spacio.html">Spacio</a></li>
                        <li><a href="rancho.html">Rancho</a></li>
                        <li><a href="new_kid.html">New Kid</a></li>
                        <li><a href="retro.html">Retro</a></li>
                        <li><a href="isolated.html">Isolated</a></li>
                        <li><a href="portugal_vega.html">Portugal Vega</a></li>
                        <li><a href="serena.html">Serena Book</a></li>
                        <li><a href="summertime.html">Summertime</a></li>
                        <li><a href="numb.html">Numb.</a></li>
                        <li><a href="voyager.html">Voyager</a></li>
                        <li><a href="let_it_kill_you.html">Let It Kill You</a></li>
                        <li><a href="street_vision.html">Street Vision</a></li>
                        <li><a href="gamarra.html">Gamarra</a></li>
                    </ul>
                </li>
            	<li><a href="info.html">info</a></li>
            	<li><a href="promo.html">promo</a></li>
            	<li><a href="contacto.html">contacto</a></li>
			</ul>
		</nav>
	</header>
  </div>

这里是链接，以便您可以看到问题:

jsfiddle.net/9fdhefqc/

我发现，如果我设置portfolio href从'#'到' '它不会发生，但然后菜单将无法在移动设备上正常工作，所以这不是我要找的答案。