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. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  2. 杨柳絮-Info：太原市多部门通力合作科学治理杨柳飞絮效果好

    ylbtech-杨柳絮-Info:太原市多部门通力合作科学治理杨柳飞絮效果好 1.返回顶部 1. 太原市多部门通力合作科学治理杨柳飞絮效果好 2016-04-21 07:16 4月10日,随着气温升高 ...

  3. 如何在不卸载原来jdk1.8的情况下切换到jdk1.7

    将Path环境变量中的JAVA_HOME变量中写入现在的JDK1.7路径即可.

  4. Python高级核心技术97讲 系列教程

    Python高级核心技术97讲 系列教程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...

  5. Leetcode844.Backspace String Compare比较含退格的字符串

    给定 S 和 T 两个字符串,当它们分别被输入到空白的文本编辑器后,判断二者是否相等,并返回结果. # 代表退格字符. 示例 1: 输入:S = "ab#c", T = " ...

  6. R语言数据分析利器data.table包—数据框结构处理精讲

    R语言数据分析利器data.table包-数据框结构处理精讲 R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代 ...

  7. swift 风骚的Guard语法

    http://blog.csdn.net/pjk1129/article/details/48627153#0-qzone-1-64255-d020d2d2a4e8d1a374a433f596ad14 ...

  8. oracle限制一个用户空闲时间

    alter system set resource_limit = true; create profile idletime limit idle_time 3; alter user outln ...

  9. python 缓冲区 subprocess 黏包 黏包解决方案

    一.缓冲区 二.两种黏包现象 两种黏包现象: 1 连续的小包可能会被优化算法给组合到一起进行发送 黏包现象1客户端 import socket BUFSIZE = 1024 ip_prort = (' ...

  10. DLA SQL分析函数：SQL语句审计与分析的利器

    1. 简介 Data Lake Analytics(https://www.aliyun.com/product/datalakeanalytics)最新release一组SQL内置函数,用来进行SQ ...