Làm thế nào để loại bỏ container thả xuống bootstrap?

Question

Như được mô tả trong hình ảnh, tôi đang cố gắng loại bỏ vùng chứa trong suốt xung quanh tùy chọn thả xuống. Tôi đã thử nhiều giải pháp CSS chưa hoạt động. Đây là đoạn mã HTML cho thả xuống:

 \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

Vậy là nó bóng của container bạn không muốn? Nếu vậy bạn có thể thay đổi .dropdown-menu lớp css bằng cách thêm một cái gì đó giống như

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

Nếu điều này không làm việc thêm !important trước ; trên các thuộc tính mà không phải là biến mất, như vậy:

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