CSS,PHP,HTML Active Dropdown Link问题

时间:2015-07-27 19:23:21

标签: php html css list

所以我遇到了一些我无法理解的PHP字符串问题。目标是让父母"链接保持活动状态,同时允许下拉功能控制。

<li class="<?php echo($activePage == "releases" ? "active" : "")?>" class="dropdown">
  <a href="releases.php" class="dropdown-toggle">Press <i class="fa fa-angle-down"></i></a>
   <ul class="dropdown-menu">
    <li class="<?php echo($activePage == "releases" ? "active" : "") ?>"><a href="releases.php">Releases</a></li>
    <li class="<?php echo($activePage == "clips" ? "active" : "") ?>"><a href="clips.php">Press Clips</a></li>
    <li class="<?php echo($activePage == "assets" ? "active" : "") ?>"><a href="assets.php">Press Assets</a></li>
   </ul>
</li>

所以这里的目标是让 PRESS 链接在三个发布剪辑资产

您在第一个列表中注意到我目前有两个班级。当infront确实显示 PRESS 链接时,它的活动状态不允许任何下拉,因此当我将另一个类放在前面时,其他三个链接不可见,下拉工作但 PRESS 链接不显示活动状态。

任何人都可以为我解决这个问题吗?非常感谢!

1 个答案:

答案 0 :(得分:0)

当我走下树时,这是我用于网站的设置,以使活动的父元素保持突出显示:

#navigation ul.nav > li:hover ul a:hover, 
#navigation ul.nav > li:hover, #navigation ul.nav > li:hover ul li:hover {
background: #3e4b51 none repeat scroll 0 0 !important;
text-decoration: none;
}

菜单设置如下:

<nav id="navigation" class="col-full" role="navigation">
    <ul class="nav">
        <li>
            <a href="https://example.com/">HOME</a>
        </li>
        <li>
            <a href="https://example.com/level-1/">Level 1</a>
            <ul class="sub-menu">
                <li>
                    <a href="https://example.com/level-2/">Level 2</a>
                    <ul>
                        <li>
                            <a href="https://example.com/level-3">Level 3</a>
                            <ul>
                                <li>
                                    <a href="https://example.com/level-4-1">Level 4 Item 1</a>
                                </li>
                                <li>
                                    <a href="https://example.com/level-4-2">Level 4 Item 2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>