Question

我有一个这样的导航栏和子导航栏：

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
        <li class=<?php if ($currentPage=='about') 
echo ' "active" '; ?> "dropdown"><a href="http://link/about.php" class="dropdown-toggle" data-toggle="dropdown">ABOUT</a>

            <ul class="dropdown-menu" role="menu">
                <li class="abt-firstcell"><a href="http://link/about.php">OUR STORY</a></li>
                <li class="abt-secondcell"><a href="http://link/our_team.php">OUR TEAM</a></li>
            </ul>
        </li>
        <li <?php if ($currentPage=='advertising') 
echo ' class="active" '; ?> class="dropdown"><a href="http://link/advertising-how.php" class="dropdown-toggle" data-toggle="dropdown">ADVERTISING</a>
            <ul class="dropdown-menu" role="menu">
                <li class="adv-firstcell"><a href="http://link/advertising-how.php">HOW IT WORKS</a></li>

                <li class="adv-secondcell"><a href="#">OUR PARTNERS</a></li>
            </ul>
        </li>
</div>

它的CSS：

.abt-secondcell{
text-align:left;
}
.abt-firstcell{
width:500px;
padding-left:30px;
text-align:right;
border-right:2px solid black;
}
.adv-secondcell{
text-align:left;
}
.adv-firstcell{
width:500px;
padding-right:0;
padding-left:450px;
text-align:right;
border-right:2px solid black;
}

.nav { margin-bottom: 0; }
.nav > li.dropdown:hover { position: static; }
.nav > li.dropdown:hover .dropdown-menu, .nav > li.active:hover                .dropdown-menu {
display:table; 
width: 100%; 
text-align: center; 
left:0; 
right:0; 
background:#E1E0DE;

}
.dropdown-menu>li{
display: table-cell;

}

我跟着this example在bootstrap 3上创建了subnav bar，以便在悬停时工作。但现在的问题是，当一个页面处于ACTIVE状态时，subnav栏不能正常工作。我很确定这是CSS的一个问题，但无法弄清楚发生了什么。在每个页面上，我声明$currentPage是一个东西，以便标题知道它在哪个页面。

问题是，当我在“关于”页面时，它处于活动状态，当我将鼠标悬停在“关于”选项卡上时，无法正常工作，就像我将鼠标悬停在广告上时一样。基本上，ACTIVE标签会搞砸它。有人可以告诉我有什么问题吗？

Answer 1

您在同一元素上有2个class属性，请将其更改为：

<li class="dropdown<?php if ($currentPage=='advertising') echo ' active'; ?>">

（并为其他实例做同样的事情）

当页面标记为活动时，子目录导航无法正常运行

1 个答案: