How to remove bootstrap boot container?

Question

As described in the image, I am trying to get rid of the transparent container around the dropdown options. I tried using several CSS solutions that did not work. Here is the HTML code for the dropdown menu:

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

  <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

So this is a container shadow that you don't want? If so, you can change the .dropdown-menu css class by adding something like

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

If this does not work, add !important before ; in properties that do not fade, for example:

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