Hi, I'm having problems with the drop-down menus in a Link Online , it turns out that in this menu I have two drop-down ones that say KNOW ME and other PROGRAMS, when I go over PROGRAMS it displays everything well, now when the other one passes by KNOWS the one of know us it leaves me below the one of programs. Attach said code that you use.
var hoverProgramas = false;
var flotanteProgramasLoaded = false;
var hoverConocenos = false;
var flotanteConocenosLoaded = false;
jQuery(document).ready(function(){
//Accion: Conocenos
$("#conocenos-flotar").hover(function() {
$(".flotante").hide();
$("#flotante_c").show();
$(".flotante-conocenos").toggle();
$('#desvanecimiento-01').hide();
$('#desvanecimiento-02').toggle();
hoverConocenos = !hoverConocenos;
});
$('#desvanecimiento-02').hover(function() {
$(".flotante-conocenos").hide();
$('#desvanecimiento-02').hide();
$("#ArtistasLetraSeleccionada").html("");
$("#ArtistasLetraSeleccionada").hide();
$(".seleccionConocenosLetra li").removeClass("seleccionado");
hoverConocenos = !hoverConocenos;
});
$(".flotante-conocenos").hover(function(){
$(".flotante-conocenos").show();
$('#desvanecimiento-02').show();
hoverConocenos = true;
});
//Accion: Programas
$("#noticias-flotar").hover(function(){
$(".flotante").hide();
$("#flotante_p").show();
if(!hoverProgramas){
$(".flotante-programas").toggle();
$('#desvanecimiento-02').hide();
$('#desvanecimiento-01').toggle();
hoverProgramas = true;
}
});
$(".flotante-programas").hover(function(){
$(this).show();
$('#desvanecimiento-01').show();
hoverProgramas = true;
});
$("#desvanecimiento-01").hover(function(){
$(".flotante-programas").hide();
$('#desvanecimiento-01').hide();
hoverProgramas = 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;
}
.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-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?php bloginfo( 'url' ); ?>/inicio" title="">
<img class="img-responsive logo" src="<?php echo THEME_IMAGES; ?>/svg/logo-fundacion-header.svg" alt="logo fundacion loma negra">
</a>
</div>
<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-3 col-md-3 col-lg-3 caja-menu">
<ul>
<li><a href="<?php bloginfo( 'url' ); ?>/nosotros" title="">somos f.n.l.</a></li>
<li><a href="<?php bloginfo( 'url' ); ?>/como-y-donde-trabajamos" title="">cómo y donde trabajamos</a></li>
<li><a href="<?php bloginfo( 'url' ); ?>/autoridades-y-equipo" title="">AUTORIDADES Y EQUIPO</a></li>
<li><a href="<?php bloginfo( 'url' ); ?>/informes-de-gestion" 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" 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="artistas-flotar" title="Artistas" class="link hidden-xs">CONOCENOS <span class="caret"></span></a>
</li>
<li class="dropdown programas">
<a href="<?php bloginfo( 'url' ); ?>/programas" 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="<?php bloginfo( 'url' ); ?>/programa-puente"><img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/svg/logo-menu-puente.svg" alt="">
<a href="<?php bloginfo( 'url' ); ?>/programa-puente" class="btn btn-ingresar" title="">INGRESAR</a>
</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-puente" title="">PROGRAMA PUENTE</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso"><a href="<?php bloginfo( 'url' ); ?>/programa-compromiso"><img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/svg/logo-menu-compromiso.svg" alt="">
<a href="<?php bloginfo( 'url' ); ?>/programa-compromiso" class="btn btn-ingresar" title="">INGRESAR</a>
</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-compromiso" title="">PROGRAMA COMPROMISO</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-negocios"><a href="<?php bloginfo( 'url' ); ?>/programa-negocios"><img class="img-responsive center-block"><span>Programa de negocios exclusivos</span>
<a href="<?php bloginfo( 'url' ); ?>/programa-negocios" class="btn btn-ingresar" title="">INGRESAR</a></a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-negocios" title="">NEGOCIOS INCLUSIVOS</a></li>
</ul>
<a href="<?php bloginfo( 'url' ); ?>/programas" id="noticias-flotar" title="Programas" class="link hidden-xs">PROGRAMAS <span class="caret"></span></a>
</li>
<li class="dropdown">
<a href="<?php bloginfo( 'url' ); ?>/novedades">NOVEDADES <!-- <span class="caret"></span> --></a>
<!-- <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Link</a></li>
</ul> -->
</li>
<li><a href="<?php bloginfo( 'url' ); ?>/contacto">CONTACTO</a></li>
<?php if(have_rows('listado_redes',4)):
while(have_rows('listado_redes',4)): the_row();?>
<li><a href="<?php the_sub_field('url',4); ?>" title="<?php the_sub_field('nombre'); ?>"><i class="fa <?php the_sub_field('fa-font',4); ?>" aria-hidden="true"></i></a></li>
<?php
endwhile;
endif;
?>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="desvanecimiento" id="desvanecimiento-01"></div>
<div class="desvanecimiento" id="desvanecimiento-02"></div>
</div>
<div 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="<?php bloginfo( 'url' ); ?>/nosotros" title="">somos f.n.l.</a></li>
<li><a href="<?php bloginfo( 'url' ); ?>/como-y-donde-trabajamos" title="">cómo y donde trabajamos</a></li>
<li><a href="" title="">AUTORIDADES Y EQUIPO</a></li>
<li><a href="<?php bloginfo( 'url' ); ?>/informes-de-gestion" 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" 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>
</div>
</div>
<div 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="<?php bloginfo( 'url' ); ?>/programa-puente"><img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/svg/logo-menu-puente.svg" alt="">
<a href="<?php bloginfo( 'url' ); ?>/programa-puente" class="btn btn-ingresar" title="">INGRESAR</a>
</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-puente" title="">PROGRAMA PUENTE</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso"><a href="<?php bloginfo( 'url' ); ?>/programa-compromiso"><img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/svg/logo-menu-compromiso.svg" alt="">
<a href="<?php bloginfo( 'url' ); ?>/programa-compromiso" class="btn btn-ingresar" title="">INGRESAR</a>
</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-compromiso" title="">PROGRAMA COMPROMISO</a></li>
<li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-negocios"><a href="<?php bloginfo( 'url' ); ?>/programa-negocios"><img class="img-responsive center-block"><span>Programa de negocios exclusivos</span>
<a href="<?php bloginfo( 'url' ); ?>/programa-negocios" class="btn btn-ingresar" title="">INGRESAR</a></a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="<?php bloginfo( 'url' ); ?>/programa-negocios" title="">NEGOCIOS INCLUSIVOS</a></li>
</ul>
</div>
</div>
</header>