jquery - 一个好看的导航菜单，只剩下一个任务

Question

我设计了一个漂亮的菜单，需要帮助添加一项功能。我的问题是我希望在将鼠标悬停在子菜单上时集合悬停状态持续存在。

HTML

<div class="navi">
            <ul class="menu">
                <li><a href="#" title="Women">Women</a></li>
                <li><a href="#">Men</a></li>
                <li><a href="#">Junior</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Collections</a>
                    <ul class='children'>
                        <li><a href="#" style="background-image: none; font-weight: bold;">Year</a>
                        </li>
                        <li><a href="#">2014</a> <span class="nav-arrow">&#9656;</span>
                            <ul class='children'>
                                <li><a href="#" style="background-image: none;">SUMMER</a></li>
                                <li><a href="#" style="background-image: none;">AUTUMN</a></li>
                                <li><a href="#" style="background-image: none;">WINTER</a></li>
                                <li><a href="#" style="background-image: none;">SPRING</a></li>

                            </ul>
                        </li>
                        <li><a href="">2013</a><span class="nav-arrow">&#9656;</span>
                            <ul class='children'>
                                <li><a href="#" style="background-image: none;">SUMMER</a></li>
                                <li><a href="#" style="background-image: none;">AUTUMN</a></li>
                                <li><a href="#" style="background-image: none;">WINTER</a></li>
                                <li><a href="#" style="background-image: none;">SPRING</a></li>

                            </ul>
                        </li>
                        <li><a href="">2012</a><span class="nav-arrow">&#9656;</span>
                            <ul class='children'>
                                <li><a href="#" style="background-image: none;">SUMMER</a></li>
                                <li><a href="#" style="background-image: none;">AUTUMN</a></li>
                                <li><a href="#" style="background-image: none;">WINTER</a></li>
                                <li><a href="#" style="background-image: none;">SPRING</a></li>

                            </ul>
                        </li>
                        <li><a href="">2011</a> <span class="nav-arrow">&#9656;</span>
                            <ul class='children'>
                                <li><a href="#" style="background-image: none;">SUMMER</a></li>
                                <li><a href="#" style="background-image: none;">AUTUMN</a></li>
                                <li><a href="#" style="background-image: none;">WINTER</a></li>
                                <li><a href="#" style="background-image: none;">SPRING</a></li>

                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="sale"><a href="#">Sale</a></li>
                <li class="last"><a href='#'>MY ACCOUNT</a></li>
            </ul>
            <br style="clear: both;" />
        </div>


    </div> 

CSS

.navi {
        width:100%;
        border-bottom:5px solid #000;
        height:50px;
        margin-bottom:10px;
        padding:0;
    }

    .menu {
        width:100%;
        padding:0;
        margin:0;

    }
    .menu, .menu ul {
        display: block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        font-family:Open Sans;
        border: 0 none;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 5;
        text-transform:uppercase;
        font-family:Open Sans;
        font-weight:bold;

    }
    .menu li a{
    font-size:14px;}
    .menu li:hover {
        white-space: normal;
        z-index: 100;
    }
    .menu li li {
        float: none;
    }
    .menu ul {
        left: 0;
        position: absolute;
        top: 0;
        visibility: hidden;
        z-index: 10;
    }
    .menu li:hover > ul {
        top: 100%;
        visibility: visible;
    }
    .menu li li:hover > ul {
        left: 100%;
        top: 0;
    }
    .menu:after, .menu ul:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    .menu, .menu ul {
        min-height: 0;
    }
    .menu ul {
        margin: -10px 0 0 -30px;
        padding: 10px 30px 30px;
    }
    .menu ul ul {
        margin: -30px 0 0 -10px;
        padding: 30px 30px 30px 10px;
    }
    .menu ul li a:hover, .menu li li a:hover {
        color: #484848;
        text-decoration: none;
    }
    .menu ul {
        min-width: 15em;
        width: auto;    
    }
    .menu a.arrow {
        background: url(img/arrow.gif) no-repeat right center;
    }
    .menu ul a.arrow {
        background: url(img/right.gif) no-repeat 97% center;
    }
    .menu .menuRight {
        float: right;
        margin-right: 0px;
    }

    .menu a {
        font-family:Open Sans;
        color: #314350;
        display: block;
        height:50px;
        line-height:50px;
        margin: 0 0px 0 0;
        padding: 0 1em;
        position: relative;
        text-decoration: none;
        font-size:18px;

    }
    .menu a:hover {
        background-color: #1c2b36;
        color: #ffffff;
        box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
    }
    .menu .current_page_item a {
        background-color:#1c2b36;
        color: #ffffff;
        box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
    }
    .menu li li {

        background:#DFDFDF;

        color: #000;
        filter: none;
        width: auto;
    }
    .menu li li a {
        background-position: 50% 50%;
        background-repeat: no-repeat;

        color: #000;
        font-size: 14px;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
        padding: 5px 10px;
        text-shadow: none;
        white-space: nowrap;
        width: auto;
    }
    .menu li li a:hover {
        background:#E5E4E4;
        box-shadow:none;    
    }
    .menu ul > li + li {
        border-top: 0 none;
    }
    .menu li li:hover > ul {
        left: 100%;
        top: 0;
    }
    .menu > li:first-child > a {
        border-left: medium none;
    }
    .menu > li:first-child > a, .menu li + li + li li:first-child > a {
    }
    .menu ul.children a, .menu .current_page_ancestor, .menu .current_page_ancestor ul a {
        background: none;
        filter: none;

    }
    .menu ul.children a{background:url(images/arrow.png) no-repeat 93% 70%;}
    .menu ul.children a:hover{background:url(images/arrow.png) no-repeat 93% 70% #999;}
    ul.sub-menu .current_page_item a {
        background:none;
    }

    .nav-arrow {

        position:absolute;
        top:8px;
        right: 4px;
    }

    li.last {
    float:right;
    padding-left:60px;

    }
    li.sale a {
    color:#F05050;

    }

Fiddle

Answer 1

您所需要做的就是使用 CSS 以稍微不同的方式定位您的元素。

目前，您正在通过定位每个菜单 anchor 悬停状态来装饰菜单，如下所示:

 .menu a:hover {
       /* menu item styles here */
}

因此，当用户将鼠标悬停在父链接上时，要访问菜单项，他们会立即将鼠标移出。您需要将 :hover 状态应用到包含整个菜单项的父元素和它的子元素。在这种情况下，.menu li。

因此我们不会影响所有子元素(即其中的嵌套列表)，您可以target direct children使用选择器 >

.menu > li:hover > a {
    /* menu styles here*/
}

这里再次针对主菜单项中的嵌套列表项:

.menu ul.children > li:hover > a {
     /* nested menu item styles */
}

或者，您可以像这样定位相同的元素:

.menu li > ul > li:hover > a

这是一个 example of it working .