开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-24 10:11:40 6023 0
1 条回答
写回答
取消 提交回答
  • 方法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>
    2019-07-17 19:12:04
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载