Question

我做了一个鼠标悬停子菜单，一切正常。但每当我将鼠标光标移出父节时，子菜单就会消失......

即使我从父母移出光标，如何保持子菜单出现？

这是我的代码

$(document).ready(function () {
    $(".findStore").findMenu();
});

$.fn.findMenu = function () {
    var el = $(this);

    /* for IE 6 */
    $("li", el).mouseover(function () {
        $(this).addClass("hover");
    }).mouseout(function () {
        $(this).removeClass("hover");
    });

    /*  keyboard accessible */
    $("a", el).focus(function () {
        $(this).parents("li").addClass("hover");
    }).blur(function () {
        $(this).parents("li").removeClass("hover");
    });
}

.findStore {
    width:280px;
    height:500px;
    background:#f3f3f3
}
.findStore ul li {
    float: left;
    position: relative;
    text-align:center;
}
.findStore ul li:hover, .findStore ul li.hover a {
}
.findStore ul li a {
    position:relative;
    display: block;
    width:40px;
    height:20px;
}
.findStore ul li a:hover, .findStore ul li a:focus, .findStore ul li a:active, .findStore ul li.hover {
    z-index: 100;
    text-decoration:none;
    color:#fff;
    background:#478414;
}
.findStore ul ul {
    position: absolute;
    top:20px;
    left: -9999em;
}
.findStore ul ul li {
    float: left;
    position: static;
}
.findStore ul ul li a {
    display: block;
    width:72px;
    height:20px;
}
.findStore ul li:hover ul, .findStore ul li.hover ul {
    left:0;
} 


<div class="findStore">
    <ul>
        <li> <a href="#"><span>menu1</span></a>

            <ul>
                <li><a href="javascript:openStrNoPop(100000);">sub1</a>
                </li>
                <li><a href="javascript:openStrNoPop(112233);">sub1</a>
                </li>
                <li>
            </ul>
            </li>
            <li> <a href="#" class=""><span>menu2</span></a>

                <ul>
                    <li><a href="#">sub2</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#" class=""><span>menu3</span></a>

                <ul>
                    <li><a href="#">sub3</a>
                    </li>
                </ul>
            </li>
    </ul>
</div>

Answer 1

使用此css在菜单下方制作子菜单

工作演示http://jsfiddle.net/cse_tushar/ewG9t/1/

<强> CSS

li{
    list-style:none;
    margin-right:5px;
    float:left;
}
li a{
    text-decoration:none;
}
ul li ul{
    margin:0;
    padding:0;
}

jquery mouseover子菜单

1 个答案: