鼠标悬停时子菜单断开连接，也无法导航到子菜单

Question

我正在尝试创建一个子菜单，但是必须将子菜单HTML保留在主菜单之外，并且在鼠标悬停时它会显示隐藏，但它没有按预期工作，我想我不是在尝试一个好的方法，有人可以看一看并建议。

以下是JSfiddle demo

备注 问题是，当你鼠标悬停在“商店”并尝试进入子菜单时，它的隐藏。 2.我必须将子菜单html保留在主导航之外，因为子菜单必须是全宽的。 3.我也想添加一些过渡效果，我知道使用display none / block，过渡不起作用，但有人可以建议吗？

$('.shop').mouseenter(function(){
   			$('.primary-subnav').show()                        
		}).mouseleave(function(){
    		$('.primary-subnav').hide()
	});

.nav{float:left; width:100%;}
.primarynav {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: right;
}
.primarynav > li {
	list-style: none;
	display: inline;
}
.primarynav > li > a {
	display: inline-block;
	text-decoration: none;
	color: #333;
	padding: 0 15px;
	height: 67px;
	line-height: 67px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
	background-color: #c0e5da;
}
.primary-subnav {
	position: absolute;
	left: 0;
	top: 64px;
	width: 100%;
	border-top: 2px solid #c0e5da;
	background-color: rgba(255,0,0,0.9);
	min-height: 350px;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul class="primarynav">
    <li><a href="javascript:;" class="shop">Shop</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a></li>
    <li><a href="javascript:;">Nav Item</a></li>
  </ul>
</div>
<div class="primary-subnav">
  <div class="container"> Submenu Wrapper </div>
</div>

Answer 1

您可以附加与.shop到.primary-subnav的鼠标悬停和鼠标移动事件相关的相同事件处理程序。

$('.shop').mouseover(function(){
   			$('.primary-subnav').fadeIn(1000);                        
		}).mouseleave(function(){
    		$('.primary-subnav').hide();
	});
$('.primary-subnav').mouseover(function(){
   			$('.primary-subnav').show();
		}).mouseleave(function(){
    		$('.primary-subnav').hide();
	});

.nav{float:left; width:100%;}
.primarynav {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: right;
}
.primarynav > li {
	list-style: none;
	display: inline;
}
.primarynav > li > a {
	display: inline-block;
	text-decoration: none;
	color: #333;
	padding: 0 15px;
	height: 67px;
	line-height: 67px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
	background-color: #c0e5da;
}
.primary-subnav {
	position: absolute;
	left: 0;
	top: 64px;
	width: 100%;
	border-top: 2px solid #c0e5da;
	background-color: rgba(255,0,0,0.9);
	min-height: 350px;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul class="primarynav">
    <li><a href="javascript:;" class="shop">Shop</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a></li>
    <li><a href="javascript:;">Nav Item</a></li>
  </ul>
</div>
<div class="primary-subnav">
  <div class="container"> Submenu Wrapper </div>
</div>