CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfrontend
Suhail Prasathong
Suhail Prasathong

Reputation: 125

How to remove bootstrap dropdown container?

the issue

As described in the image, I am attempting to get rid of the transparent container around the dropdown options. I've attempted multiple CSS solutions that have not worked. Here is the HTML code for the dropdown:

    		$('.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>

Upvotes: 5

Views: 2984

Answers (1)

Sian Finlay
Sian Finlay

Reputation: 66

So is it the container's shadow you don't want? If so you can alter the .dropdown-menu class css by adding something like

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

If this doesn't work add !important before the ; on the properties that aren't disappearing, like so:

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

Upvotes: 5

Related Questions