Use jQuery events mouseenterand mouseleave, instead of mouseoverand mouseout.
mouseover mouseout , .menu_container. , , ul display: none display: block. , .
jQuery .
$( document ).ready(function() {
$('.menu_container').mouseenter(function(e) {
$('ul', this).show();
});
$('.menu_container').mouseleave(function(e) {
$('ul', this).hide();
});
});
.menu { background:#f8f8f8; color:#707070; text-align:center; }
.menu li { margin-bottom:0 }
.menu li { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; }
.menu li:hover { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; }
.menu li a:hover { color:#06a7ea; }
.menu li span { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container { position:relative; display:inline-table; }
.menu li.menu_container ul { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover { color:#FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="container-fluid menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li class="menu_container">
<span>Home
<ul>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
</ul>
</span>
</li>
</ul>
</nav>
Hide result