Question

即时通讯使用jQuery Multi Level CSS菜单，当鼠标悬停时，每个子节点都会直接显示在悬停/点击列表项目下方。
我遇到的问题是选中的父项目的bg颜色在将鼠标悬停在子区域列表上时不保持悬停颜色。
会不会有任何帮助，我几个小时都在苦苦挣扎。

<{3}}

上的

演示

这是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。

jQuery多级CSS菜单on-hover无法正常工作

2 个答案: