बूटस्ट्रैप ड्रॉपडाउन कंटेनर को कैसे हटाएं?

Question

जैसा कि छवि में वर्णित है, मैं ड्रॉपडाउन विकल्पों के आस-पास पारदर्शी कंटेनर से छुटकारा पाने का प्रयास कर रहा हूं। मैंने कई सीएसएस समाधानों का प्रयास किया है जिन्होंने काम नहीं किया है।

 \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

तो यह कंटेनर की छाया आप नहीं करना चाहती है: यहाँ लटकती के लिए HTML कोड है? ताकि आप की तरह

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

कुछ जोड़कर .dropdown-menu वर्ग सीएसएस बदल सकते हैं यदि यह गुण है कि गायब नहीं हैं, इसलिए की तरह पर ; से पहले !important जोड़ने काम नहीं करता है:

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