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