鼠标离开按钮后如何防止.slideUp？ JQuery的

Question

Helo all。如何为我的下拉菜单阻止.slideUp。我希望下拉菜单只有在我离开按钮区域时才会向上滑动。按钮是.personal-mega和.flyout。

这是我想要实现的[示例] [1]链接。

我确实尝试调整js，但它无效。

$(document).ready(function(){
        $(".personal-mega").hover(            
            function() {
                $('.flyout', this).not('.in 
.flyout').stop(true,true).slideDown("400");
                $(this).toggleClass('open');        
            },
            function() {
                $('.flyout', this).not('.in 
.flyout').stop(true,true).slideUp("400");
                $(this).toggleClass('open');       
            }
        );
    });

以下是片段： （菜单有响应，请查看整页）

$(".personal-mega").hover(function(){
    $('.flyout').slideDown("400");
});


/*
$(document).ready(function(){
    $(".personal-mega").hover(            
        function() {
            $('.flyout', this).stop(true,true).slideDown("400");
            $(this).toggleClass('open');        
        },
        function() {
            $('.flyout', this).stop(true,true).slideUp("400");
            $(this).toggleClass('open');       
        }
    );
});*/

/* navbar/top navbar */
.pos-navbar{
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
	z-index: 1000;
}

.pos-main-nav li a, .pos-top-nav li a{
	text-transform: uppercase;
	font-weight: 500;
}

.bg-pos{
	background-color: #DF1E34;
}

.pos-menu{
	border: 1px solid #DF1E34;
	border-radius: 50px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
	overflow: hidden;
}

.pos-menu a{
	color: #DF1E34 !important;
}

.pos-menu:hover{
	transition: all 0.6s ease;
}

.pos-menu:hover a{
	color: #FFFFFF !important;
}

.pos-top-menu{
	border: 1px solid #FFFFFF;
	border-radius: 50px;
	padding-left: 10px;
	padding-right: 10px;
}

.pos-top-menu button{
	text-transform: uppercase;
	font-size: 14px;
	background-color: transparent;
	border: none;
}

.pos-top-menu button:focus{
	box-shadow: none;
}

.pos-top-menu button:after{
	content: none;
}

.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show>button.dropdown-toggle,
.pos-top-menu button:hover{
	color: #FFFFFF;
	background-color: transparent !important;
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/*.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show > button.dropdown-toggle{
	background-color: transparent !important; 
	border-color: transparent !important; 
	box-shadow: none !important; 
}*/

.pos-top-menu ul{
	padding : 0;
	top: 10px !important;
	left: -30px !important;
	overflow: hidden;
}

.pos-top-menu ul .dropdown-item{
	padding: 0;
}


.pos-top-nav li a{
	font-size: 14px;
	color: #FFFFFF !important;
}

.pos-top-nav .pos-top-menu ul li a{
	color: #666666 !important;
}

.pos-top-nav li a:active,
.pos-top-nav li a:focus,
.pos-top-nav li a:hover{
color: #333333 !important;
}

.no-link{
	pointer-events: none;
	cursor: default;
}
.nav-item{
	display: inline-block;
}

/* overide hover.css */
.hvr-sweep-to-bottom:before{
	background: #DF1E34;
}

.hvr-underline-from-center:before{
	left: 50%;
	right: 50%;
	background: #DF1E34;
	height: 2px;
}

.flyout {
	position:absolute;
	width:100%;
	background:red;
	overflow: hidden;
	z-index:10000000;
}

.hidden {
	display:none;
}

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- navbar -->
	<nav class="pos-navbar navbar navbar-expand-lg navbar-light bg-white">
		<div class="container">
			<a class="navbar-brand" href="#">
				<img src="img/pos-logo.svg" width="50%" alt="">
			</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="pos-main-nav navbar-nav ml-auto">
					<li class="nav-item pos-menu hvr-sweep-to-bottom">
						<a class="nav-link personal-hover personal-mega" href="#">Personal</a>
					</li>
					<li class="nav-item pos-menu hvr-sweep-to-bottom">
						<a class="nav-link" href="#">Business</a>
					</li>

					<li class="nav-item" style="width: 20px;"></li>

					<li class="nav-item hvr-underline-from-center">
						<a class="nav-link" href="#">Digital Mailbox</a>
					</li>
					<li class="nav-item hvr-underline-from-center">
						<a class="nav-link" href="#">Shop</a>
					</li>
					<li class="nav-item hvr-underline-from-center">
						<a class="nav-link" href="#">Promotion</a>
					</li>
					<li class="nav-item">
						<a class="nav-link no-link" href="#">|</a>
					</li>
					<li class="nav-item hvr-float">
						<a class="nav-link" href="#" data-toggle="modal" data-target=".search-modal-lg"><img src="img/icon-search.svg" width="20"></a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="flyout hidden container-fluid">131231<br>1<br>1<br>1<br>1</div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>