0

     $(document).ready(function(){
        $(".dropdown").click(            
            function() {
                $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("600");
                $(this).toggleClass('open');        
            }
        );
      });
header .navbar-header{
    position: relative;
    z-index: 10;
    left: 0;
    right: 0;
}

header .nav-bottom{
  box-shadow: inherit;
}
header .navbar-default{
  color: #272727;
  background-color: #000;
  background-image: inherit;
  box-shadow: inherit;
  position: fixed;
  padding: 11px 0;
  height: 81px;
  border-radius: inherit;
}
header .navbar-default .navbar-nav > li > a{
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}


header .nav > li > a{
  padding: 6px 7px;
}
header .navbar-default .navbar-nav > .dropdown > a span{
  color: #808080;
  margin-left: 10px;
  font-size: 28px;
}
header > nav > div > div > div > div.menu-derecho.hidden-xs > div > ul > li > a > span:hover{
  color: #00ab84!important
}
header .navbar-default .navbar-brand{
  color:#fff;
}
header .menu-large {
  position: static !important;
}
header .megamenu{
  width:100%;
}
header .megamenu> li > ul {
  padding: 0;
  margin: 0;
}
header .megamenu> li > ul > li {
  list-style: none;
}
header .megamenu> li > ul > li > a {
  display: block;
  padding: 3px 0px 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
  margin: auto;
}
header .megamenu> li ul > li > a:hover,
header .megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #238491;
  background-color: transparent;
}
header .megamenu > .caja-programa-redes ul > .logos-social > a:hover,
header .megamenu > .caja-programa-redes ul > .logos-social > a:focus {
  text-decoration: none;
  color: #238491;
  background-color: #00a780;
}

header .megamenu.disabled > a,
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
  color: #999999;
}
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
header .megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
header .nav-bottom .radio-online .navbar-collapse .play-stop{
  float: left;
  height: 50px;
  width: 45px;
  margin-right: 15px;
}
header .nav-bottom .radio-online .navbar-collapse .onda-desplegable{
  float: left;
}
header .nav-bottom .radio-online .navbar-collapse {
  cursor: pointer;
  width: 409px;
}
.nav-bottom .menu-derecho .fa-search{
  color: #5bb2c9;
  font-size: 18px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo{
  padding: 55px 0;
}

.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va, .caja-programa-redes{
  padding: 40px 20px 25px 20px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa{
  padding: 40px 50px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .titulo-del-programa {
  color: #00ab84;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .conductor-del-programa {
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size:19px;
}

.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .hora-del-programa {
  color: #9a9a9a;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size:14px;
  margin-top: 10px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul >.hora-del-programa > .fa-clock-o{
  font-size: 15px!important;
  color: #9a9a9a!important;
  margin-top: 3px!important;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .titulo-descripcion-del-programa{
  color: #fff;
  font-size: 18px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600;
  margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .descripcion-del-programa{
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;  
  font-size: 14px;
}

header .megamenu> li > ul > li >  .btn-mas-info-programa{
  background-color: #00a780;
  padding: 8px 20px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600; 
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
header .megamenu> li > ul > li >  .btn-mas-info-programa:hover{
  background-color: #2d2d2d;
  color: #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes{
  color: #fff;
  font-size: 18px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600;
  margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes-whatsapp{
  color: #fff;
  font-size: 15px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600;
  margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social {
  display: inline-block;
  padding: 5px 2px;
  margin-bottom: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a {
  width: 39px;
  height: 39px;
  padding: 0;
  background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/cd-socials.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border-radius: 50px;
  border:1px solid #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a:hover {
  background-color: #30ab83;
  border:1px solid #30ab83;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-facebook a {
  background-position: -4px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul >  .logo-twitter a {
  background-position: -46px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-instragram a {
  background-position: -91px -4px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul >  .logo-vimeo a {
  background-position: -136px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul >  .numero-whatsapp  a > .fa-whatsapp{
  margin-top: 10px!important;
  font-size: 20px!important;
  margin-right: 8px!important;
}
header .megamenu> li > ul > li > .numero-whatsapp {
  padding: 0;
  color: #fff;
  font-size: 18px;
  margin: 0;
}

/*--------------------------------------------------*/

/*DESPLEGABLE MENU PRINCIPAL*/

.menu-large .dropdown-menu{
  background-color: #1b1b1b;
  border-radius: inherit;
}

.menu-large .megamenu .titulo-slogan{
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: #fff;
  text-align: center;
}
.menu-large .megamenu .titulo-slogan span{
  text-decoration: line-through;
  font-weight: 500;  
}
/*-----------------logos de sybila-------------------------- */

.menu-large .megamenu .logo-deplegable-innocenza a {
  width: 124px;
  height: 30px;
  padding: 0;
  background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/logos/logo-inocenza.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;

}

.menu-large .megamenu .logo-deplegable-sybyla a {
  width: 125px;
  height: 44px;
  padding: 0;
  background-image: url("../images/logos/logo-sybila.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;

}
.menu-large .megamenu .logo-deplegable-sybpro a {
  width: 124px;
  height: 35px;
  padding: 0;
  background-image: url("../images/logos/logo-sybtv.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;

}
/*---------HOVER----*/
.menu-large .megamenu .logo-innocenza a:hover {
  background-position: 0px 0px;
  background-image: url("../images/logos/logo-inocenza-hover.svg");
  background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybyla a:hover {
  background-position: 0px 0px;
  background-image: url("../images/logos/logo-sybila-hover.svg");
  background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybpro a:hover {
  background-position: 0px 0px;
  background-image: url("../images/logos/logo-sybtv-hover.svg");
  background-repeat: no-repeat;
}

/*-------------------------------------------------------*/
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo ul li{
  list-style: none;
}
.navbar-default .navbar-nav > li > a { 
   display: inline-block; 
   vertical-align: middle; 
   -webkit-transform: translateZ(0); 
   transform: translateZ(0); 
   box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
   -webkit-backface-visibility: hidden; 
   backface-visibility: hidden; 
   -moz-osx-font-smoothing: grayscale; 
   position: relative; 
   overflow: hidden; 
 } 

.navbar-default .navbar-nav > li > a:before { 
   content: ""; 
   position: absolute; 
   z-index: -1; 
   left: 0; 
   right: 0; 
   bottom: 0; 
   height: 4px; 
   -webkit-transform: translateY(4px); 
   transform: translateY(4px); 
   -webkit-transition-property: transform; 
   transition-property: transform; 
   -webkit-transition-duration: 0.3s; 
   transition-duration: 0.3s; 
   -webkit-transition-timing-function: ease-out; 
   transition-timing-function: ease-out; 
 } 
.navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:focus:before, .navbar-default .navbar-nav > li > a:active:before { 
    -webkit-transform: translateY(0); 
    transform: translateY(0);
    color: red;
    background-color: #00ab84; 
 } 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a{
    background-image:inherit;
 }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    box-shadow:inherit;
    background-color: transparent;
 }
.menu-color{
  background-color: #f2f9fb;
}
.menu-color-historia{
  background-color: #e5e4e9;
}
.navbar-default{
  border-color: transparent;
  margin-bottom: 0;
}
/*MENU RADIO ONLINE*/

#play, #pause {
   background: transparent;
   position: relative;
   display: block;
   margin-top: 5px
}

#play {
    width: 0;        
    height: 0;
    position: relative;
    content: "";
}

#pause:before {
    content: "";
    top: 10px;
    left: 25px;
}

#pause:after {
    content: "";
    top: 10px;
    right: 33px;
}
header .nav-bottom .menu-principal .logo-cantilo .logo-principal{
  float: left;
  margin-left: 10px;
  margin-right: 15px;
}
header .nav-bottom .menu-principal .play-stop-mobile{
  float: left;
  width: 49px;
}
header .nav-bottom .menu-principal .onda-mobile{
  float: left;
}
header .nav-bottom .menu-principal{
  padding: 0 33px;
  margin-top: 6px;
}
header .nav-bottom .menu-principal .logo-cantilo{
  float: left;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large  i{
  color: #fff;
  font-size: 17px;
  float: left;
  margin-right: 5px;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large  a:hover{
  color: red
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large .fa-angle-down{
  float: right;
  font-size: 22px;
  margin-left: 8px;
  position: relative;
  bottom: 4px;
}
header .nav-bottom .menu-derecho{
  float: left;
  width: 387px;
}
header .nav-bottom .menu-derecho .navbar-collapse{
  float: right;
} 
header .nav-bottom .radio-online{
  float: right;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large  h5{
  color: #fff;
  margin: 0;
  margin-top: 1px;
  font-family: 'Titillium Web', sans-serif;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large  h3{
  color: #00ab84;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  margin: 0;
  float: left;
  font-size: 20px;
  clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h3:hover{
  color: #fff!important;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > i:hover{
  color: green!important;
}

header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large  h6{
  color: #fff;
  text-align: right;
  clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h6:hover{
  color: #e2b739!important
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .onda-de-radio{
  margin-left: 15px;
}

.cd-header {
    position: relative;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    height: 65px;

    z-index: 3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}
.cd-primary-nav-trigger{
  float: left;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 80px;
    background: transparent;
    box-shadow: none;
    margin: auto;

  }
}
@media only screen and (min-width: 1170px) {
  .cd-header {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .cd-header.is-fixed {
    position: fixed;
    top: -80px;
    background-color: rgba(0, 0, 0, 0.96);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<header>
      <nav class="navbar navbar-default navbar-header cd-header" role="navigation">
        <div class="nav-bottom">      
          <div class="container">
            <div class="row">
                <div class="menu-logo">
                    <div class="navbar-header">
                      <div class="menu-principal">
                        <div class="logo-cantilo" style="float: left;">
                          <a class="cd-primary-nav-trigger" href="#0">
                            <span class="cd-menu-text"></span>
                            <span class="cd-menu-icon"></span>
                          </a> 
                          <a href="index.html">
                            <img class="img-responsive logo-principal" src="http://qkstudiodemo.com/radiocantilo/html/images/logo-cantilo.svg" alt="radio cantilo">
                          </a> 
                        </div>

                        <div class="play-stop-mobile hidden-sm hidden-md hidden-lg">
                            <a href="#" id="play">
                              <img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
                            </a> 
                            <a href="#" id="pause" style="display: none;">
                              <img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
                            </a>
                        </div>  
                        <div class="onda-mobile hidden-sm hidden-md hidden-lg">
                          <img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial-mobile.png">
                        </div>
                      </div>                     
                    </div>
                </div>
             
                <div class="menu-derecho hidden-xs">      
                  <div class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                        <li class="dropdown menu-large">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          <img src="http://qkstudiodemo.com/radiocantilo/html/images/logo-sybila.png"> 
                            <span class="fa fa-angle-down"></span>
                          </a>       
                          <ul class="dropdown-menu megamenu row">
                            <li class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-1 caja-titulo">
                              <ul>
                                <li class="titulo-slogan">NUESTRAS <span>EMPRESAS</span> CREACIONES</li>                                
                              </ul>
                            </li>
                            <li class="col-sm-3 col-md-2 col-md-offset-1 col-lg-2 caja-titulo">
                              <ul>
                                 <li class="logo-deplegable-innocenza logo-innocenza">
                                    <a href="#0"></a>
                                 </li>
                              </ul>
                            </li>
                            <li class="col-sm-2 col-md-2 col-lg-2 caja-titulo">
                              <ul>
                                 <li class="logo-deplegable-sybyla logo-sybyla">
                                    <a href="#0"></a>
                                 </li>
                              </ul>
                            </li>
                            <li class="col-sm-3 col-md-2 col-lg-2 caja-titulo">
                              <ul>
                                 <li class="logo-deplegable-sybpro logo-sybpro">
                                    <a href="#0"></a>
                                 </li>
                              </ul>
                            </li>  
                            <li class="hidden-xs hidden-sm col-md-1 col-lg-3">
                            </li>                                         
                          </ul>        
                        </li>
                      </ul>                 
                  </div>
                </div>

                <div class="radio-online">
                  <div class="navbar-collapse collapse">
                      <div class="play-stop">
                        <a href="#" id="play">
                          <img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
                        </a> 
                        <a href="#" id="pause" style="display: none;">
                          <img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
                        </a>
                      </div>

                      <ul class="nav navbar-nav onda-desplegable">
                        <li class="dropdown menu-large">
                          <a href="#" style=" padding: 0">
                            <span style="float: right;clear: both; width: 150px;">
                            <i class="fa fa-headphones" aria-hidden="true"></i>
                            <h5>Estás escuchando</h5>
                            </span>  
                          <h3>Almacén de discos</h3>
                          <h6>15 a 18hs.<i class="fa fa-angle-down"></i></h6></a>

                          <ul class="dropdown-menu megamenu row">
                            <li class="col-sm-4 col-md-2 col-lg-3 caja-programa">
                              <ul>
                                <li class="titulo-del-programa">Almacén de discos</li> 
                                <li class="conductor-del-programa">Claudio “BB” Sanzo</li> 
                                <li class="hora-del-programa"><i class="fa fa-clock-o" aria-hidden="true"></i>Lunes a Viernes de 15 a 18hs.</li>
                              </ul>
                            </li>
                            <li class="col-sm-4 col-md-3 col-lg-2 caja-de-que-va">
                              <ul>
                                <li class="titulo-descripcion-del-programa">DE QUÉ VA?</li>
                                <li class="descripcion-del-programa">Phasellus at mi finibus, tempor odio at, facilisis nibh. Vivamus eget diam sollicitudin, commodo orci porta, congue ante. In eget lacus nisl. Nunc placerat finibus elementum. </li>
                                <li><a href="" class="btn-mas-info-programa">MÁS INFO</a></li>
                              </ul>
                            </li>
                            <li class="col-sm-4 col-md-3 col-lg-2 caja-programa-redes">
                              <ul>
                                 <li class="titulo-redes">ENCONTRALO EN</li>
                                  <li class="logos-social logo-facebook"><a href="#0">Facebook</a></li>
                                  <li class="logos-social logo-twitter"><a href="#0">Twitter</a></li>
                                  <li class="logos-social logo-instragram"><a href="#0">Instagram</a></li>
                                  <li class="logos-social logo-vimeo"><a href="#0">vimeo</a></li>                                 
                                 <li class="titulo-redes-whatsapp">WHATSAPEALO AHORA AL</li>
                                 <li><a href="" class="numero-whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i>(221) 4722065</a></li>
                              </ul>
                            </li>
                            <li class="hidden-sm col-md-4 col-lg-5">
                              <ul>
                                 <li class="logo-deplegable-sybpro logo-sybpro">
                                    <img class="img-responsive" src="http://qkstudiodemo.com/radiocantilo/html/images/claudio-b-sanzo.jpg" alt="claudio-b-sanzo">
                                 </li>
                              </ul>
                            </li>              
                          </ul>          
                        </li>
                        <li class="hidden-sm">
                          <img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial.png">
                        </li>
                      </ul>                 
                  </div>                  
                </div>
            </div>
          </div>  
        </div>
      </nav>
      <div>

     </div>  
    </header>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Hola un compañero me paso un trabajo que esta hecho en bootstrap y resulta que tiene un menú principal donde me pide que muestre como activo un boton que despliega un contenido. Este dicho botón es el que esta del lado derecho donde tiene un play y dice estas escuchando almacén de disco. El problema por el que escriboes que cuando esta activo el href y despliega el contenido debería quedarse por debajo una linea verde y al salir del estado activo debería irse. Lo que me esta haciendo ahora es que cuando clickeo la linea aparece, despliega se queda pero cuando salgo del desplegable que vuelvo a hacer click se queda la linea verde. no se si se comprende. adjunto el código para que miren dicho ejemplo. Dejo el ejemplo del código ejemplo andando acá adjunto ya que stack no permite mas de 30000 caracteres

4
  • Hola Mariano, como te dije antes no pude editar tu código ya que el sistema no me lo permitió, pero si es solo un menú dudo que tenga toda esa cantidad de líneas, por que no intentas dejar únicamente lo esencial para poderlo ejecutar en el snippet de SOes ? Commented el 20 dic. 2017 a las 0:49
  • el problema es que tengo una cierta cantidad de caracteres para poner y por eso lo puse en esa pagina. pero voy a trata de ponerlo aca para que lo puedan ver todos
    – MarianoF
    Commented el 20 dic. 2017 a las 1:51
  • @MarianoFranco no necesitas subir tooodo el sitio, solo basta con lo necesario para ejecutar la parte en la que necesitas ayuda :D Commented el 20 dic. 2017 a las 1:56
  • claro! si es solo el menu pasa que es un poco complejo, ahi subi algo pero me quedo medio desarmado. de aca se puede apreciar mejor qkstudiodemo.com/radiocantilo/html lo subi a ftp
    – MarianoF
    Commented el 20 dic. 2017 a las 2:01

1 respuesta 1

0

No se si comprendí exactamente el problema. Pero si te referís a que al clickear sobre "ALMACEN DE DISCOS" para cerrar el desplegable, la linea verde sigue presente, es porque el elemento sigue "en foco" y el CSS incluye el estado focus.

Opción 1:
Directamente remové la referencia a :focus, te quedaría así:

.navbar-default .navbar-nav > li > a:hover:before,
.navbar-default .navbar-nav > li > a:active:before { 
    -webkit-transform: translateY(0); 
    transform: translateY(0);
    color: red;
    background-color: #00ab84; 
}

Opción 2:
Pisá el estado y sacale el background-color.

.navbar-default .navbar-nav > li > a:focus::before {
    background-color: none;
}
3
  • .navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:focus:before, .navbar-default .navbar-nav > li > a:active:before { -webkit-transform: translateY(0); transform: translateY(0); color: red; background-color: #00ab84; }
    – MarianoF
    Commented el 20 dic. 2017 a las 12:01
  • cuando hace eso a que esta haciendo referencia? no me funciono
    – MarianoF
    Commented el 20 dic. 2017 a las 12:02
  • El problema es el que yo menciono? Eso hace referencia a cuando te paras sobre el botón (hover), cuando lo estás clickeando (active) y cuando tiene foco (focus). Después de clickearlo queda con foco. Si removes sólo eso, tiene que andar.
    – azeós
    Commented el 20 dic. 2017 a las 16:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.