CSS 菜单 - 显示事件页面元素子菜单

Question

我有一个典型的 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; }

Answer 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/