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. Codeforces Round #275 (Div. 2) A. Counterexample【数论/最大公约数】

    A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. 洛谷P1248 加工生产调度

    流水作业调度问题 有\(N\)个作业要在两台机器\(M_1\)和\(M_2\)组成的流水线上完成加工.每个作业\(i\)都必须先花时间\(a_i\)在\(M_1\)上加工,然后花时间\(b_i\)在\ ...

  3. AnalyticDB for MySQL 3.0 技术架构解析

    企业数据需求不断变化,近年来变化趋势日益明显,从数据的3V特性看:体积,速度和变化:Big Data强调数据量,PB级以上,是静态数据.而Fast Data在数据量的基础上,意味着速度和和变化,意味着 ...

  4. jQuery事件大全(真的很全)

    DOM Attribute $("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...

  5. 19-2 from和modelform的用法和介绍

    一 form 1. form的作用 1. 生成HTML代码 2. 帮我们做数据有效性的校验 3. 保留上次输入内容,显示错误提示 2. form组件校验数据有效性   1. 内置的校验规则 1. re ...

  6. Leetcode744.Find Smallest Letter Greater Than Target寻找比目标字母大的最小字母

    给定一个只包含小写字母的有序数组letters 和一个目标字母 target,寻找有序数组里面比目标字母大的最小字母. 数组里字母的顺序是循环的.举个例子,如果目标字母target = 'z' 并且有 ...

  7. php刷新当前页面,js刷新页面

    echo "<script language=JavaScript> location.replace(location.href);</script>"; ...

  8. 只想着一直调用一直爽， 那API凭证泄漏风险如何破？

    如今各家云厂商都通过给用户提供API调用的方式来实现一些自动化编排方面的需求.为了解决调用API过程中的通信加密和身份认证问题,大多数云厂商会使用同一套技术方案—基于非对称密钥算法的鉴权密钥对,这里的 ...

  9. JavaScript--函数中（）的作用

    在函数中参数是函数的时候:function a(函数名) 与 function a(函数名()) 的区别: // 在函数里面() 是一个编组和立即执行的功能 /** * function autoPl ...

  10. Java练习 SDUT-2728_最佳拟合直线

    最佳拟合直线 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在很多情况下,天文观测得到的数据是一组包含很大数量的序列点 ...