jQuery 多级 CSS 菜单悬停不工作

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;
}