Jak usunąć rozwijany kontener bootstrap?

Question

Jak opisano na obrazku, staram się pozbyć przezroczystego pojemnika wokół opcji rozwijanych. Próbowałem wielu rozwiązań CSS, które nie działały. Oto kod HTML dla listy rozwijanej:

 \t \t $('.navbar .dropdown').hover(function() { 
 
\t \t $(this).find('.dropdown-menu').first().stop(true, true).slideDown(250); 
 
\t \t }, function() { 
 
\t \t $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105) 
 
\t \t });

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 

 
     <li><a href="#home" class="page-scroll">Home</a></li> 
 
     <li><a href="#about-section" class="page-scroll">About</a></li> 
 
     <li><a href="#services-section" class="page-scroll">Services</a></li> 
 
     <li><a href="#contact-section" class="page-scroll">Contact</a></li> 
 
     </ul> 
 
    </div>

Answer 1

Więc jest to cień kontenera nie chcesz? Jeśli tak, możesz zmienić klasę css .dropdown-menu dodając coś podobnego

.dropdown-menu { 
    border: none; 
    border-radius: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

Jeśli to nie zadziała dodać !important przed ; na właściwości, które nie znikają, tak jak poniżej:

.dropdown-menu { 
    border: none !important; 
    /* etc... */ 
}