引导下拉css与其他菜单项冲突

Question

所以我有一个使用Bootstrap的菜单系统，基本上是试图阻止下拉框项采用以下适用于的css样式

html。。。

  <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#slider" class="scroll">Home</a></li>
            <li><a href="#services" class="scroll">Services</a></li>
            <li><a href="#portfolio" class="scroll">Portfolio</a></li>
            <li><a href="#testimonials" class="scroll">Testimonials</a></li>
            <li><a href="#team" class="scroll">Team</a></li>
            <li><a href="#blog" class="scroll">Blog</a></li>
            <!-- Uncomment the line below if you want the newsletter section to appear on the navbar -->
            <!-- <li><a href="#newsletter" class="scroll">Newsletter</a></li> -->
            <li><a href="#contact" class="scroll">Contact</a></li>
          </ul>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
             <li><a href="#slider" class="scroll">Home</a></li>
            <li><a href="#services" class="scroll">Services</a></li>
            <li><a href="#portfolio" class="scroll">Portfolio</a></li>
            </ul>
            </li>
   </ul>

下拉列表是最后一个选项。

css将所有菜单项设置为具有下划线，当单击菜单项时下划线会移动，css如下所示。。。

.navbar-nav{
        font-size: 12px;
        text-transform: uppercase;
        font-weight: @navbarItemFontWeight;
        letter-spacing: 1px;

        &>li>a{
            color: @white;

            &:hover{
                color: @white;
                text-shadow: 0 0 15px @white, 0 0 30px @white, 0 0 30px @white;
            }
        }

        &>li.active>a{
            color: @white;
            background-color: transparent;
            text-shadow: 0 0 15px @white, 0 0 30px @white, 0 0 30px @white;
            box-shadow: inset 0 -2px 0 0 @primaryColor;

            &:hover{
                color: @white;
                text-shadow: none;
            }
        }
    }

因此，简而言之，我希望下拉列表没有插入框阴影。。。。我如何做到这一点，同时保持下拉菜单作为整体菜单结构和所有其他样式的一部分？




Answer 1

试着这样做：

li.dropdown{
   box-shadow: none;
}