CSS 菜单 - 显示活动页面项子菜单答案

【问题标题】：CSS Menu - Display the active pages items submenuCSS 菜单 - 显示活动页面项子菜单
【发布时间】：2023-03-25 23:05:02
【问题描述】：

我有一个典型的 CSS 顶部导航，当您滚动不同的父菜单项时会显示一个子菜单。如何更改代码以保持显示活动的子菜单。因此，如果您在该父菜单项或其子项的页面上，它将保持该子菜单显示，除非您将鼠标悬停在另一个父菜单项上。

这里是代码的 jsfiddle 链接：http://jsfiddle.net/cgzUm/

代码本身：

<div id="topbar">
<div id="navbar">
    <div class="elements">
        <ul>
            <li id="menua"><a href="#">Menu A</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu A1</a></li>
                        <li><a href="#">Submenu A2</a></li>
                        <li><a href="#">Submenu A3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menub"><a href="#">Menu B</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu B1</a></li>
                        <li><a href="#">Submenu B2</a></li>
                        <li><a href="#">Submenu B3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menuc"><a href="#">Menu C</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu C1</a></li>
                        <li><a href="#">Submenu C2</a></li>
                        <li><a href="#">Submenu C3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menud"><a href="#">Menu D</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu D1</a></li>
                        <li><a href="#">Submenu D2</a></li>
                        <li><a href="#">Submenu D3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

还有 CSS 代码：

#navbar { position: relative; width: 990px; height: 40px; z-index: 12; margin: 0px auto; }
#navbar .elements { display: inline; float: left; position: relative; width: 100%; height: 100%; text-align: center; margin: 0px; padding: 0px; text-align: center; }
#navbar .elements > ul { clear: left; display: inline; float: left; position: relative; left: 50%; height: 40px; margin: 0px; padding: 0px; list-style-type: none; margin: 0px; }
#navbar .elements > ul > li { display: inline; float: left; position: relative; right: 50%; text-transform: uppercase; margin: 0px; padding: 10px 0px 5px 0px; height: 25px; font-size: 14px; }
#navbar .elements > ul > li > a { display: block; color: #002B55; overflow: hidden; font-size: 12px; font-weight: 700; text-decoration: none; height: 25px; line-height: 25px; padding: 0px 25px; margin: 0px; }
#navbar .elements a:hover, #navbar .elements li a.selected { color: #0073AE; }
#navbar .elements > ul > li:hover .subnavbar { display:block; }
#navbar .elements > ul > li > a:active .subnavbar { display:block; }
#navbar .subnavbar { position: fixed; width: 100%; height: 27px; top: 40px; left: 0px; background-color: #FFF; border-top: 1px solid #2B2B2B; text-align: center; margin: 0px; padding: 0px; overflow: hidden; z-index: 13; display: none; }
#navbar .subnavbar.over { display: block; padding-bottom: 7px; }
#navbar .subnavbar ul { height: 27px; z-index: 5; list-style-type: none; margin: 0px auto; padding: 0px; }
#navbar .subnavbar ul li { display: inline; text-transform: uppercase; }
#navbar .subnavbar ul li a { text-decoration: none; line-height: 27px; font-size: 12px; padding: 7px 8px 7px 9px; color: #002B55; }
#navbar .subnavbar ul li a:hover { color: #0073AE; }
#navbar .subnavbar ul li a.selected { color: #0073AE; }
#navbar .selected .subnavbar { z-index: 12; }
#navbar ul > li.selected div.subnavbar { display: block; }
#navbar .elements > ul > li { padding-bottom: 6px; }

【问题讨论】：

您需要在服务器端的活动菜单项中添加一个活动类。然后，添加 CSS 以保持该菜单打开。

标签： css menu

【解决方案1】：

首先，在活动菜单项 li 上添加 class="active"，如下所示：

<li id="about" class="active"><a href="/wordpress/about">About</a>

然后添加这行CSS：

#navbar .elements > ul > li.active .subnavbar { display:block; z-index:1; }

并更新这个的 z-index：

#navbar .elements > ul > li:hover .subnavbar { display:block; z-index:2;}

jsFiddle：http://jsfiddle.net/cgzUm/4/

【讨论】：

哎呀，等等 - 我刚刚意识到如果稍后的 li 被激活，这会出现问题 - 然后它会隐藏它下面的第一个 subnav。我认为需要更新一些东西，以确保在翻滚时隐藏所有其他子导航......让我看看。
谢谢。有没有办法通过伪选择器来做到这一点？比如：活跃？
你的意思是像：活跃？ a:active 描述了一个链接在被点击过程中的状态；就像您单击它但尚未释放鼠标按钮时一样。它与您正在寻找的活动页面无关。
添加 z-indexes 解决了我第一条评论中的问题；将相应地更新我的答案。