<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        *{margin: 0;

        padding: 0;

        list-style: none;

        border: 0;}

        #ua1{

            width: 340px;

            height: 30px;

            background:url(./images/bg.jpg);

            margin: 50px auto 0; 

            text-align: center;

            line-height: 30px;

        }

        #ua1 .la{

            width: 100px;

            height: 30px;

            background:url(./images/libg.jpg);

            margin-left:10px;

            float:left;

            position: relative;

        }

        .la ul{

            display: none;

            position:absolute;

        }

        .la li{

            width: 100px;

            height: 30px;

            background:url(./images/libg.jpg);

        }

        #box{height: 500px;

            border: 1px solid #000;}

        

    </style>

     <script src="jquery-3.5.1.js"></script>

</head>

<body>

        <ul id="ua1" >

            <li id="la1" class="la" onmousemove="fn('la1','ub1')"onmouseout="fc('la1','ub1')"><a href="#">目录</a>

                <ul id="ub1"  >

                    <li id="lb1"><a href="#">目录1</a></li>

                    <li id="lb2"><a href="#">目录2</a></li>

                    <li id="lb3"><a href="#">目录3</a></li>

                </ul>

            </li>

            <li id="la2" class="la" onmousemove="fn('la2','ub2')"onmouseout="fc('la2','ub2')"><a href="#">讨论</a>

                <ul id="ub2">

                    <li id="lb1"><a href="#">讨论1</a></li>

                    <li id="lb2"><a href="#">讨论2</a></li>

                    <li id="lb3"><a href="#">讨论3</a></li>

                </ul>

            </li>

            <li id="la3" class="la" onmousemove="fn('la3','ub3')" onmouseout="fc('la3','ub3')"><a href="#">笔记</a>

                <ul id="ub3">

                    <li id="lb1"><a href="#">笔记1</a></li>

                    <li id="lb2"><a href="#">笔记2</a></li>

                    <li id="lb3"><a href="#">笔记3</a></li>

                </ul>

            </li>

        </ul>

        <div id="box">呀呀呀呀呀呀晕嘤嘤呀呀呀呀呀呀呀呀呀呀呀呀有四大行</div>

        <script>

            function fn(la,ub){

                let oLa=document.getElementById(la);

                let oUb=document.getElementById(ub);

                oUb.style.display="block";

            }

            function fc(la,ub){

                let oLa=document.getElementById(la);

                let oUb=document.getElementById(ub);

                oUb.style.display="none";

            }

        </script>

        <!-- <script>

            // jQuery写法一

                $("#ua1 li").hover(function(){

                    $(this).children('ul').slideToggle();

                });

                 // jQuery写法二

                 $('#ua1 li').hover(function(){

                     $(this).children('ul').show();

                 },function(){

                     $(this).children('ul').hide();

                 }) 

                  // jQuery写法三

                  $(function(){

                      $("#ua1 li").mouseenter(function(){

                          $(this).children('ul').show();

                      });

                      $("#ua1 li").mouseleave(function(){

                          $(this).children("ul").hide();

                      });

                  })

        </script> -->

</body>

</html>

下拉菜单，下拉导航，JavaScript，html，jQuery的实现代码的更多相关文章

  1. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  2. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  3. 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery

    写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...

  4. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  5. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

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

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

  7. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  8. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  9. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  10. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

随机推荐

  1. 常见的HTTP返回状态值

    200 (成功) 服务器已成功处理了请求. 通常,这表示服务器提供了请求的网页. 301 (永久移动) 请求的网页已永久移动到新位置. 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自 ...

  2. JavaScript基础内容

    javascript:是个脚本语言,需要有宿主文件,他的宿主文件是html文件.用来交互的 Javascript基础  写法分类: 1.内联(行内):写在标签里面,以事件属性表现 属性名就是事件属性名 ...

  3. ken桑带你读源码 之 scrapy_redis

    首先更大家说下  正式部署上线的爬虫会有分布式爬虫的需求  而且原本scrapy 的seen (判断重复url的池  不知道用啥词  已抓url吧 )  保存在磁盘 url 队列 也是保存在磁盘 (保 ...

  4. Linux图形界面与命令行界面以及用户之间的转换

    刚刚不小心进入了命令行界面,,,,,, ALT SHIFE F5 咋回去的呢 sudo startx 但是回去以后默认是root ,,,,,, 所以切换用户 su username//用户名 就可以切 ...

  5. PHP array_diff() 函数

    实例 比较两个数组的值,并返回差集: <?php $a1=array("a"=>"red","b"=>"gree ...

  6. 删除数据-大表根据rowid来删除部分数据

    偶遇需求,大表中需要删除部分数据.分批删除. declare TYPE type_table_rowid IS TABLE OF ROWID INDEX BY BINARY_INTEGER;table ...

  7. day13. 迭代器与高阶函数

    一.迭代器 """ 能被next调用,并不断返回下一个值的对象,叫做迭代器(对象) 概念: 迭代器指的是迭代取值的工具,迭代是一个重复的过程,每次重复都是基于上一次的结果 ...

  8. 100% 展示 MySQL 语句执行的神器-Optimizer Trace

    在上一篇文章<用Explain 命令分析 MySQL 的 SQL 执行>中,我们讲解了 Explain 命令的详细使用.但是它只能展示 SQL 语句的执行计划,无法展示为什么一些其他的执行 ...

  9. JS中escape()、encodeURI()、encodeURIComponent()区别详解

    avaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decode ...

  10. javascript数组笔记

    1.数组 2.利用new创建数组 var arr= new Array(); 3.利用数组字面量创建数组 var 数组名=[]; 4.数组里面的数据叫 5.数组的索引(数组下标从0开始) 6.遍历数组 ...