Después de batallar con tu código logre la función que buscas que haga tu menú. En primer lugar las funciones que necesitas es mouseleave() y mouseenter().
Como primer paso en el html agregue las ids flotante-conocenos y flotante-programas a los div con class flotante ya que ellos son los contenedores de tu menú desplegable. Hice lo mismo también con las opciones restantes.
A nivel de CSS cambie el class flotante:
.flotante {
position: absolute;
width: 100%;
background-color: #e03131;
z-index:11;
top: 134px;
display:none; //agregue esto para que no se muestre inicialmente los divs
}
Y elimine el estilo de sus hijos que tenían la propiedad display:none;
/*.flotante-noticias,
.flotante-artistas,*/
#desvanecimiento-01,
#desvanecimiento-02 {
display: none;
}
La lógica que debes emplear seria usar mouseenter para activar una función cuando el puntero ingrese a la opción CONOCENOS o PROGRAMAS , en este caso visualizar tus divs que le agregue ids según sea el caso. Después sobre esos mismos divs activar la función mouseleave para ocultarlo si es que salen del área del elemento. Finalmente hice una validaciones para que cuando entren en las opciones del menú se oculten o visualicen los menus
var hoverConocenos = false;
var hovePrograma = false;
jQuery(document).ready(function() {
//Accion: Conocenos
$("#conocenos-flotar").mouseenter(function() {
// pregunto si esta activo el hover de noticias de ser true lo cierro
if(hovePrograma){
$("#flotante-programas").hide();
$('#desvanecimiento-01').hide();
hovePrograma = false;
}
//muestro la informacion
$("#flotante-conocenos").show();
$('#desvanecimiento-02').show();
hoverConocenos = true;
});
$("#flotante-conocenos").mouseleave(function() {
// cuando salga el mouse del elemento div este se escondera
$("#flotante-conocenos").hide();
$('#desvanecimiento-02').hide();
hoverConocenos = false;
});
//Accion: Programas
$("#programas-flotar").mouseenter(function() {
// pregunto si esta activo el hover de concenos de ser true lo cierro
if(hoverConocenos){
$("#flotante-conocenos").hide();
$('#desvanecimiento-02').hide();
hoverConocenos = false;
}
$("#flotante-programas").show();
$('#desvanecimiento-01').show();
hovePrograma = true;
});
$("#flotante-programas").mouseleave(function() {
// cuando salga el mouse del elemento div este se escondera
$("#flotante-programas").hide();
$('#desvanecimiento-01').hide();
hovePrograma = false;
});
//agrego esto para que cuando entres a unas de las opciones restantes se cierre los divs desplegados
$("#menu-novedad").mouseenter(HideAll);
$("#menu-contacto").mouseenter(HideAll);
function HideAll(){
// pregunto si esta activo el hover de noticias de ser true lo cierro
if(hovePrograma){
$("#flotante-programas").hide();
$('#desvanecimiento-01').hide();
hovePrograma = false;
}
// pregunto si esta activo el hover de artista de ser true lo cierro
if(hoverConocenos){
$("#flotante-conocenos").hide();
$('#desvanecimiento-02').hide();
hoverConocenos = false;
}
}
});
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
background-color: transparent;
}
.nav-inline .nav li {
position: static;
}
.nav-inline .nav li.open:before {
content: " ";
display: block;
/* background: #e7e7e7; */
position: absolute;
width: 100%;
height: 50px;
top: 75px;
right: 0;
left: 0;
}
.nav-inline .nav .dropdown-menu {
left: 0 !important;
right: 0 !important;
box-shadow: none;
border: none;
margin: 0 auto;
max-width: 100%;
background: transparent;
padding: 0;
margin-top: 19px;
}
.nav-inline .nav .dropdown-menu li {
float: left;
}
.nav-inline .nav .dropdown-menu li a {
width: auto !important;
background: transparent;
line-height: 49px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
color: #888;
}
.nav-inline .nav .dropdown-menu li a:hover {
color: #000;
}
.navbar-nav {
float: right;
margin-top: 19px;
}
.navbar-default {
background-color: initial;
border-color: initial;
border: initial;
position: relative;
z-index: 10;
}
.navbar-default .navbar-nav>li>a {
color: #9d9d9c;
padding: 15px 12px;
font-family: 'stainlesscond-regularregular';
font-size: 15px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #e41c14;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover {
background-color: initial;
}
/*redes sociales*/
.navbar-default .navbar-nav>li>a>.fa-facebook {
color: #e41c14;
font-size: 19px;
}
.navbar-default .navbar-nav>li>a>.fa-twitter {
color: #e41c14;
font-size: 19px;
}
.navbar-default .navbar-nav>li>a>.fa-youtube-play {
color: #e41c14;
font-size: 19px;
}
.navbar-default .navbar-nav>li>a>.fa:hover {
color: #9d9d9c;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle {
margin-top: 28px;
background-color: #ce3629
}
.caja-menu {
background-color: #f5f5f5;
padding: 40px 0px 13px 106px;
height: 234px;
}
.caja-menu ul li {
list-style: none;
display: block!important;
float: initial;
}
.caja-menu ul li a {
padding: 8px 0;
color: #363636;
line-height: 42px;
text-decoration: none;
text-transform: uppercase
}
.caja-menu ul li a:hover {
color: #ce3629
}
.caja-accion {
background-color: #ce3629;
padding: 30px 30px 30px 30px;
height: 234px;
}
.caja-accion ul li {
list-style: none;
float: inherit;
}
.caja-accion ul .slogan {
text-align: center;
color: #fff;
margin-top: 26px;
font-size: 26px;
font-family: 'stainlesscond-lightregular';
line-height: 29px;
}
.navbar-default .navbar-toggle {
border-color: #c3360e;
}
.navbar-nav .programas-drop {
padding: 40px 0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #e41c14!important
}
.fondo-programa-puente {
background-image: url('http://qkstudiodemo.com/fundacionlomanegra/images/img-puente-menu.jpg');
background-repeat: no-repeat;
height: 234px;
background-size: cover;
}
.fondo-programa-puente .btn-ingresar,
.fondo-programa-compromiso .btn-ingresar,
.fondo-programa-negocios .btn-ingresar {
background-color: #cd3128;
color: #fff;
display: table;
margin: auto;
padding: 5px 28px;
margin-top: 8px;
line-height: 33px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
border-radius: initial
}
.fondo-programa-puente .btn-ingresar:hover,
.fondo-programa-compromiso .btn-ingresar:hover,
.fondo-programa-negocios .btn-ingresar:hover {
background-color: #fff;
color: #cd3128;
}
.fondo-programa-puente img,
.fondo-programa-compromiso img,
.fondo-programa-negocios img {
margin-top: 50px;
}
.fondo-programa-compromiso {
background-image: url('../images/img-compromiso-menu.jpg');
background-repeat: no-repeat;
height: 234px;
background-size: cover;
}
.fondo-programa-negocios {
background-image: url('http://qkstudiodemo.com/fundacionlomanegra/images/img-negocio-menu.jpg');
background-repeat: no-repeat;
height: 234px;
background-size: cover;
}
.fondo-programa-negocios span {
color: #fff;
font-size: 20px;
margin-top: 45px;
text-align: center;
text-transform: uppercase;
display: block;
}
.flotante {
position: absolute;
width: 100%;
background-color: #e03131;
z-index:11;
top: 134px;
display:none;
}
.flotante-noticias {
height: 234px;
}
.flotante-noticias a {
margin-top: 20px;
}
.desvanecimiento {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.56);
position: fixed;
}
/*.flotante-noticias,
.flotante-artistas,*/
#desvanecimiento-01,
#desvanecimiento-02 {
display: none;
}
.btn_descarga {
background-color: #e41b13;
border-color: #fff;
padding: 16px 29px;
color: #fff;
font-family: 'stainlesscond-lightregular';
font-size: 19px;
position: relative;
z-index: 10;
left: 0;
border-radius: initial;
-webkit-transition: all;
text-transform: uppercase;
/* margin-top: 30px; */
display: table;
margin: auto;
margin-top: 30px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lineas">
<div class="box">
<div class="box-sm red"></div>
<div class="box-sm gray"></div>
<div class="box-sm red "></div>
<div class="box-sm gray "></div>
<div class="box-sm red "></div>
</div>
</div>
<!-- LINEAS DECORATIVAS -->
<header>
<div class="navbar navbar-default nav-inline" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle hidden-lg hidden-md hidden-sm" data-toggle="dropdown">CONOCENOS <span class="caret"></span></a>
<ul class="hidden-lg hidden-md hidden-sm dropdown-menu megamenu row">
<li class="col-sm-4 col-md-3 col-lg-3 caja-accion">
<ul>
<li><img class="center-block" src="<?php echo THEME_IMAGES; ?>/nuestra-accion.png" alt="nuestra accion"></li>
<li class="slogan">Nuestra acción se sustenta en<strong style="letter-spacing: 1.5px;"> 4 líneas estratégicas</strong></li>
</ul>
</li>
<li class="col-sm-5 col-md-6 col-lg-6 sin-padding">
<ul class="imagen-overflow">
<li style="list-style: none">
<img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/personas.jpg" alt=""></li>
</ul>
</li>
</ul>
<a href="#" id="conocenos-flotar" title="Artistas" class="link hidden-xs">CONOCENOS <span class="caret"></span></a>
</li>
<li class="dropdown programas">
<a href="#" class="dropdown-toggle hidden-lg hidden-md hidden-sm" data-toggle="dropdown">PROGRAMAS <span class="caret"></span></a>
<ul class="dropdown-menu programas-drop hidden-lg hidden-md hidden-sm" role="menu">
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-puente">
<a href=""><img class="img-responsive center-block" src="" alt="">
<a href="" class="btn btn-ingresar" title="">INGRESAR</a>
</a>
</li>
<li class="hidden-sm hidden-md hidden-lg"><a href="" title="">PROGRAMA PUENTE</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso">
<a href=""><img class="img-responsive center-block" src="" alt="">
<a href="" class="btn btn-ingresar" title="">INGRESAR</a>
</a>
</li>
<li class="hidden-sm hidden-md hidden-lg"><a href="" title="">PROGRAMA COMPROMISO</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-negocios">
<a href=""><img class="img-responsive center-block"><span>Programa de negocios exclusivos</span>
<a href="" class="btn btn-ingresar" title="">INGRESAR</a></a>
</li>
<li class="hidden-sm hidden-md hidden-lg"><a href="" title="">NEGOCIOS INCLUSIVOS</a></li>
</ul>
<a href="" id="programas-flotar" title="Programas" class="link hidden-xs">PROGRAMAS <span class="caret"></span></a>
</li>
<li class="dropdown">
<a id="menu-novedad" href="">NOVEDADES <!-- <span class="caret"></span> --></a>
</li>
<li><a id="menu-contacto" href="">CONTACTO</a></li>
<li><a href="" title=""><i class="fa" aria-hidden="true"></i></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div class="desvanecimiento" id="desvanecimiento-01"></div>
<div class="desvanecimiento" id="desvanecimiento-02"></div>
</div>
<div id="flotante-conocenos" class="flotante">
<div class="flotante-artistas" >
<ul class="hidden-xs">
<li class="col-sm-3 col-md-3 col-lg-3 caja-menu">
<ul>
<li><a href="" title="">somos f.n.l.</a></li>
<li><a href="" title="">cómo y donde trabajamos</a></li>
<li><a href="" title="">AUTORIDADES Y EQUIPO</a></li>
<li><a href="" title="">informes de gestión</a></li>
</ul>
</li>
<li class="col-sm-4 col-md-3 col-lg-3 caja-accion">
<ul>
<li><img class="center-block"></li>
<li class="slogan">Nuestra acción se sustenta en<strong style="letter-spacing: 1.5px;"> 4 líneas estratégicas</strong></li>
</ul>
</li>
<li class="col-sm-5 col-md-6 col-lg-6 sin-padding">
<ul class="imagen-overflow">
<li style="list-style: none">
<img class="img-responsive center-block"></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="flotante-programas" class="flotante">
<!--DESPLEGABLE MENU-->
<div class="container-fluid flotante-noticias sin-padding">
<ul class="hidden-xs">
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-puente">
<a href=""><img class="img-responsive center-block" src="" alt="">
<a href="" class="btn btn-ingresar" title="">INGRESAR</a>
</a>
</li>
<li class="hidden-sm hidden-md hidden-lg">
<a href="" title="">PROGRAMA PUENTE</a>
</li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso">
<a href=""><img class="img-responsive center-block" src="" alt="">
<a href="" class="btn btn-ingresar" title="">INGRESAR</a>
</a>
</li>
<li class="hidden-sm hidden-md hidden-lg">
<a href="" title="">PROGRAMA COMPROMISO</a>
</li>
</ul>
</div>
</div>
</header>
.