Question

我正在制作一个下拉菜单，当按钮悬停时会出现，然后当鼠标悬停在要点击的菜单项上时，它会保持打开状态。

谁能帮助我吗？非常感谢你。

$('document').ready(function(){

// Bring up the dropdown menus - this part works

    $("#dropdownButton").hover(
        function() { 
            $(".dropdownDiv").filter(':not(:animated)').stop().animate({ height: '120px'}, 120).show(120) },
        function() { 
            $(".dropdownDiv").filter(':not(:animated)').stop().animate({ height:0}, 120).hide(120) }
    );

//Keep dropdown visible - this doesn't stop the menu from disappearing

    $(".dropdownDiv").hover(
        function() {
            $(".dropdownDiv").filter(':not(:animated)').stop().animate({ height: '120px'}, 120).show(120) },
        function() { 
            $(".dropdownDiv").filter(':not(:animated)').stop().animate({ height:0}, 120).hide(120) }
    );

这是我的HTML

<div id="topNav">
    <a href="Courses-and-Dates/" title="Courses &amp; Dates">Courses &amp; Dates</a>
    <a id="dropdownButton" href="Tracks-and-Cars/" title="Tracks &amp; Cars">Tracks &amp; Cars</a>
    <a href="Corporate/" title="Corporate">Corporate</a>
    <a href="Celebrity-Race/" title="Celebrity Race">Celebrity Race</a>
    <a href="About-Us/" title="About Us">About</a>
    <a href="Contact-Us/" title="Contact Us">Contact</a>
</div>
<div class="dropdownMainCont">
    <div class="dropdownMainContainer">
        <div class="dropdownDiv">
            <ul>
                <li><a href="#">link</a></li>
            </ul> 
        </div>
    </div>
</div>

这是我的CSS

.dropdownMainCont{
    position:absolute;
    top:170px;
    height:100px;
    width:100%;
    z-index:100;
}
.dropdownMainContainer{
    width:1024px;
    position:relative;
    margin:0 auto;
}
.dropdownDiv{
    background:#C00;
    color:#fff;
    position:absolute;
    height:0;/*auto*/
    width:180px;
    padding:10px;
    left:210px;
    float:left;
    display:none;
    z-index:1500;
}

.animate jquery下拉菜单

0 个答案: