Come rimuovere il contenitore a discesa del bootstrap?

Question

Come descritto nell'immagine, sto tentando di eliminare il contenitore trasparente attorno alle opzioni del menu a discesa. Ho provato più soluzioni CSS che non hanno funzionato. Ecco il codice HTML per la discesa:

 \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

Quindi è l'ombra del contenitore non si vuole? Se è così è possibile modificare il css .dropdown-menu classe con l'aggiunta di qualcosa di simile a

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

Se questo non funziona aggiungere !important prima della ; sulle proprietà che non stanno scomparendo, in questo modo:

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