引导下拉菜单活动类

我想通过使用引导来创建导航栏，但是当我将活动类重定向到下拉菜单时，所有子菜单都会接收活动类。我只希望工程部分使用主动类引导下拉菜单活动类

<nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target="#example-navbar-collapse"> 
       <span class="sr-only"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="index.html">About</a></li> 
      <li class="dropdown active"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        Project <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="project.html">AAAA</a></li> 
        <li><a href="#">BBB</a></li> 
        <li><a href="#">CCC</a></li> 
        <li><a href="#">DDD</a></li> 
       </ul> 
      </li> 
      <li><a href="team.html">Team</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </nav>

来源

2014-10-21 Gökalp Demirbağ

既然不能看到CSS代码...你需要添加和ul的>之间li

li > ul

来源

2014-10-21 22:14:15 Marina

您需要使用.navbar-default .navbar-nav>.active>a { //styles here for active li }仅靶向活性<li>，像这样：

.dropdown-menu { 
 
    display: block !important; 
 
} 
 
.navbar-default .navbar-nav>.active>a { 
 
    color: blue !important; 
 
    background: red !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
 
     <span class="sr-only"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="index.html">About</a> 
 
     </li> 
 
     <li class="dropdown active"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
        Project <b class="caret"></b> 
 
       </a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="project.html">AAAA</a> 
 
      </li> 
 
      <li><a href="#">BBB</a> 
 
      </li> 
 
      <li><a href="#">CCC</a> 
 
      </li> 
 
      <li><a href="#">DDD</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="team.html">Team</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

来源

2014-10-21 22:30:41

引导下拉菜单活动类

回答

相关问题