Bootstrap下拉css与其他菜单项冲突

Question

所以我有一个使用 Bootstrap 的菜单系统，并且基本上试图阻止下拉菜单项采用以下 CSS 样式，该样式适用于其他非下拉菜单项的 <li>....

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;
}