开发者社区> 问答> 正文

网页导航栏鼠标移上去自动弹出下拉菜单是怎么做的?

小旋风柴进 2016-03-24 10:11:40 3167

我的想法是用jquery监控mouseover事件,然后这是设置菜单为show。当mouseout时间触发就隐藏。但是这里的一个问题是,当从导航栏移向下拉菜单是,由于mouseout时间触发,下拉菜单就失效了。请问下自动弹出的下拉菜单一般是怎么实现的,求给一个代码例子?

监控 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:12:04

    方法1:

    <meta charset="UTF-8" />
    <div class="menubar">
        <div class="menuitem">
            <div>菜单1</div>
            <div class="submenu">
                <div>子菜单1</div>
                <div>子菜单2</div>
            </div>
        </div>
        <div class="menuitem">
            <div>菜单2</div>
            <div class="submenu">
                <div>子菜单1</div>
                <div>子菜单2</div>
                <div>子菜单3</div>
            </div>
        </div>
        <div class="menuend"></div>
    </div>
    <p>
    lsjflsjlajlsa;djflqjwwlejrflsjdlfjwqoo;lnsdl;fgnsl;rjwjeflsdjfljl;jfowei
    </p>
    <style type="text/css">
        .menubar
            {line-height: 24px;}
        .menubar .menuend
            {clear: both;}
        .menuitem
            {background: #fff; border: 1px solid #c00; position: relative; float: left; margin-right: 1em;}
        .menuitem .submenu
            {background: #ccc; border: 1px solid #00c; position: absolute; top: 25px; left: -1px; width: 5em;}
        /** 下面的控制显示和隐藏 **/
        .menuitem .submenu
            {display: none;}
        .menuitem:hover .submenu
            {display: block;}
    </style>
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程