1

im using a jQuery Multi Level CSS Menu and when on mouse hover each subnav appears directly underneath the hovered/clicked list item.
The problem i am having is the selected parent item's bg color is not keeping the on-hover color when hovering down over the subnav list.
Would appreaciate any help, i've been struggling with this for hours.

demo on http://jsfiddle.net/UqKyh/

here is the 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 -->

here is the 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;
            }
4

2 回答 2

1

只需将其添加到您的 CSS

.jquerycssmenu ul li:hover{
    background:#fcae18;
}
于 2013-05-17T20:40:55.117 回答
0

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

于 2013-05-17T20:25:13.233 回答