https://www.cnblogs.com/sandraryan/

不是很难，直接上代码~

有写注释

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    * {margin: 0;padding: 0;}

    ul {list-style: none;}

    /* 清除所有ul的小圆点 */

    .banner {

        margin: 50px auto; width: 333px; height: 30px;

        background: url("images/bg.jpg") no-repeat;

    }

    .banner li {

        background: url("images/libg.jpg") no-repeat;

    }

    /* 给所有li添加背景图片 */

    .banner>ul>li {

        float: left;margin:0 5px;position: relative;

    }

    /* div下的ul的li设置样式 */

    a {

        display: block;width: 100px;height: 30px;

        text-decoration: none;color: black;

        line-height: 30px;text-align: center;

    }

    /* 去掉a的下划线，设置样式 */

    .second {

        position: absolute;top: 30px;display: none;

    /* top: 30px; 因为一级菜单高度30px，top为0就会遮住一级菜单 */

    }

    .second li {

        padding: 5px 13px;

    }

    </style>

</head>

<body>

    <div class="banner">

        <ul>

            <li>

                <a href="">一级菜单1</a>

                    <ul class="second">

                    <li>二级菜单1</li>

                    <li>二级菜单1</li>

                    <li>二级菜单1</li>

                    </ul>

            </li>

            <li>

                <a href="">一级菜单2</a>

                    <ul class="second">

                    <li>二级菜单2</li>

                    <li>二级菜单2</li>

                    <li>二级菜单2</li>

                    </ul>

            </li>

        <li>

                <a href="">一级菜单3</a>

                    <ul  class="second">

                    <li>二级菜单3</li>

                    <li>二级菜单3</li>

                    <li>二级菜单3</li>

                    </ul>

            </li>

        </ul>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>

    $(function(){

        $(".banner>ul>li").mouseenter(function(){

            $(this).find("ul").css("display","block");

        });

        // 给div下的一级菜单li注册事件，鼠标进入显示该li下的二级菜单的ul

        $(".banner>ul>li").mouseleave(function(){

            $(this).find("ul").css("display","none");

        });

        // 给div下的一级菜单li注册事件，鼠标离开隐藏该li下的二级菜单的ul

    });

    </script>

</body>

</html>

jq实现二级菜单/下拉菜单的更多相关文章

  1. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  2. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  3. css 导航菜单+下拉菜单

    一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  4. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  5. asp怎么实现二级联动下拉菜单

    rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...

  6. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  8. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  9. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

随机推荐

  1. Git clone远程仓库

    git clone git@ip地址:/home/git_data/wechat.git

  2. listView中的button控件获取索引

    1.在listitem中初始化button的时候,给该button添加一个setTag方法,将此时的索引值传进去,然后在button的onclick事件中调用view的getTag方法,即可将list ...

  3. 多线程 多进程 协程 Queue(爬虫代码)

    快速理解多进程与多线程以及协程的使用场合和特点 首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运 ...

  4. vue-waterfall2 基于Vue.js 瀑布流组件

    vue-waterfall2 1.宽度自适应,数据绑定特效(适用于上拉加载更多) 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局-适用于下拉刷新)/mix( ...

  5. Leetcode674.Longest Continuous Increasing Subsequence最长连续递增序列

    给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. 尽管 [1,3,5,7] 也 ...

  6. 阿里云ecs环境配置

    在阿里云 CentOS 服务器(ECS)上搭建 nginx + mysql + php-fpm 环境 https://ninghao.net/blog/1368 阿里云ecs从购买到环境搭建和建站!! ...

  7. 廖雪峰Python总结5

    1.错误,调试和测试 程序编写造成了bug(必须修复) 用户输入出错(通过检查用户输入) 异常:无法在程序运行过程中预测的.异常是必须被处理的,否则程序会因为各种问题终止并且退出 1.try: try ...

  8. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...

  9. Java 和 DynamoDB

    https://docs.aws.amazon.com/zh_cn/amazondynamodb/latest/developerguide/GettingStarted.Java.html 官方

  10. “龙井”开箱评测 |Alibaba Dragonwell 新手上路指南

    作者|阿里云智能事业群 高级技术专家 陆传胜 阿里巴巴有着最丰富的 Java 应用场景,覆盖电商,金融,物流等众多领域,是世界上最大的 Java 用户之一. 2019 年 3 月 21 日,阿里巴巴在 ...