jQuery Multi Level CSS Menu on-hoover 不工作

Question

我使用 jQuery 多级 CSS 菜单，当鼠标悬停时，每个子导航直接显示在悬停/单击的列表项下方。
我遇到的问题是所选父项的背景颜色在悬停在子导航列表上时未保持悬停颜色。
会感谢任何帮助，我已经为此苦苦挣扎了好几个小时。

http://jsfiddle.net/UqKyh/上的演示

这里是html：

<div id="topnav" class="jquerycssmenu">
        <ul>
            <li><a href="#">Park Info</a>
        <ul>
            <li><a href="#">About SVB</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Location</a></li>
            <li><a href="#">Media Recognitions</a></li>
            <li><a href="#">Trip Tips</a></li>
            <li><a href="#">FAQ's</a></li>
            <li><a href="#">Policies</a></li>
        </ul>
        </li>
            <li><a href="#">Rides & Attractions</a>
        <ul>
            <li><a href="#">Our Slides</a></li>
            <li><a href="#">Our Kids Area</a></li>
            <li><a href="#">Picnic Areas</a></li>
        </ul>
        </li>
            <li><a href="#">Groups</a>
        <ul>
            <li><a href="#">Group Rates</a></li>
            <li><a href="#">Book Group</a></li>
        </ul>
        </li>
        </ul>
        <br style="clear: left" />
    </div>  <!-- /topnav -->    

这是css：

.jquerycssmenu{
            font-family: 'OxygenBold', arial;
            color: #3a4769;
            text-transform: uppercase;
            line-height: 47px;
            font-size: 18px;
            padding-left: 80px; /*offset of tabs relative to browser left edge*/
            background-image: url(images/nav-repeat.png);
            background-repeat: repeat-x;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            }

            .jquerycssmenu ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            }

            /*Top level list items*/
            .jquerycssmenu ul li{
            position: relative;
            display: inline;
            float: left;
            }

            /*Top level menu link items style*/
            .jquerycssmenu ul li a{
            display: block;
            padding: 5px 17px 4px 20px;
            margin-right: 0; /*spacing between tabs*/
            border-bottom-width: 0;
            color: #2d2b2b;
            text-decoration: none;
            }

            .jquerycssmenu ul li a:hover {
            background-color: #fcae18; /*tab link background during hover state*/
            color: #fff;
            }

            /*1st sub level menu*/
            .jquerycssmenu ul li ul{
            position: absolute;
            text-transform: capitalize;
            left: 0;
            display: block;
            visibility: hidden;
            border-top: 1px solid #ff9d14;
            }

            /*Sub level menu list items (undo style from Top level List Items)*/
            .jquerycssmenu ul li ul li{
            display: list-item;
            float: none;
            }

            /*All subsequent sub menu levels vertical offset after 1st level sub menu */
            .jquerycssmenu ul li ul li ul{
            top: 0;
            }

            /* Sub level menu links style */
            .jquerycssmenu ul li ul li a{
            font-family: 'OxygenRegular', arial;
            font-size: 15px;
            width: 160px; /*width of sub menus*/
            background: #fcae18;
            color: #fff;
            padding: 0 20px;
            margin: 0;
            border-top-width: 0;
            border-bottom: 1px solid #ff9d14;
            }

            .jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
            background: #ff9d14;
            color: #fff;
            }

            /* ######### CSS classes applied to down and right arrow images  ######### */

            .downarrowclass{
            position: absolute;
            top: 20px;
            right: 5px;
            }

            .rightarrowclass{
            position: absolute;
            top: 5px;
            right: 5px;
            }

Answer 1

只需将其添加到您的 CSS 中

.jquerycssmenu ul li:hover{
    background:#fcae18;
}

Answer 2

您应该将 Z 索引设置为 1。