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. dns-prefetch对网站速度能提升有多少？详解dns-prefetch。

    DNS解析场景 有很多大型的网站,都会用N 个CDN 域名来做图片.静态文件等资源访问.比如新浪,我们经常会看到有下列域. img1.sina.com.cn . img2.sina.com.cn .i ...

  2. 理解async和await

    async 是“异步”的简写,而 await 可以认为是 async wait 的简写. 所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执 ...

  3. 用Python的pandas框架操作Excel文件中的数据教程

    用Python的pandas框架操作Excel文件中的数据教程 本文的目的,是向您展示如何使用pandas 来执行一些常见的Excel任务.有些例子比较琐碎,但我觉得展示这些简单的东西与那些你可以在其 ...

  4. 使用Git Bash进行代码管理

    前提是已经安装了GitBash,这个稍后再出教程 1.新建一个目录,存放下载下来的项目,我在D盘新建了一个“gitspace”文件夹,用来存放下载下来的项目 2.进入刚刚新建的文件夹,即进入“gits ...

  5. 【Vue】详解组件的基础与高级用法

    Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...

  6. IE下的双外边距浮动bug

    最常见且最容易发现的额一个bug是IE 6和最低版本中的双外边距浮动bug.这个bug是任何浮动元素上的外边距加倍. 上面代码中,div盒子向左边浮动,设置的margin-left的值是10px.在c ...

  7. DELL（linux 系统里系统掉盘）（阵列Foreign）命令行里重做阵列

    故障现象 (阵列Foreign 系统下重做阵列) 例:四合一机器(DELL_XENCOMPA09) 有四个硬盘 如图 少认到一个 df  -h fdisk -l 2>/dev/null | gr ...

  8. 对象无法注册到Spring容器中，手动从spring容器中拿到我们需要的对象

    当前对象没有注册到spring容器中,此时无法new object()  的方式创建对象,否则所有@Autowired 注入的对象都为null; 处理方式: 手动创建一个类@Component注册到S ...

  9. Directx教程(25) 简单的光照模型(4)

    原文:Directx教程(25) 简单的光照模型(4)      在本篇日志中,我们尝试用不带衰减的点光源来计算漫反射颜色.     前面的三个工程,我们都用的是方向光源(directional li ...

  10. BasicAuth memo

    string authInfo = userName + ":" + userPassword; authInfo = Convert.ToBase64String(Encodin ...