Question

所以我有一个使用Bootstrap的菜单系统，我基本上试图阻止下拉菜单项采用以下css样式，这些样式适用于不是下拉列表的其他菜单项的<li> .... / p>

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

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

1 个答案: