如何移除Bootstrap下拉菜单容器？

Question

如图所示，我试图消除下拉选项周围的透明容器。我已经尝试了多种CSS解决方案，但都没有成功。这是下拉列表的HTML代码：

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

- Suhail Prasathong

---

你能加一些CSS吗？也许是你正在使用的模板链接？或者其他东西？ - Severino Lorilla Jr.

是的。提供的解决方案非常好！ - Suhail Prasathong

Answer 1

所以您不想要容器的阴影吗？如果是这样，您可以通过添加类似以下内容的CSS来更改.dropdown-menu类：

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

如果这样做不起作用，请在未消失的属性之前添加 !important，如下所示：

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

- Sian Finlay