<!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. linux杂七杂八

    反斜线\用于命令换行,在\之后应该直接回车换行 [root@CentOS7- ~]# cp /etc/sysconfig/network-scripts/ifcfg-ens33\ > /tmp/ ...

  2. Servlet学习之Maven导入Servlet-api包与Tomcat冲突报500问题

    Maven导入Servlet-api包导致无法运行报500的问题 以下解决方式适用于跟我类似的配置环境,构建servlet程序后,启动Tomcat页面报"类com.tioxy.servlet ...

  3. PHP cal_days_in_month() 函数

    ------------恢复内容开始------------ 实例 针对指定的年份和历法,获取一个月中的天数: <?php$d=cal_days_in_month(CAL_GREGORIAN,1 ...

  4. JDBC(1)-数据库连接和CRUD操作

    关于jdbc的全部jar包 链接:https://pan.baidu.com/s/1peofgu89SpepTTYuZuphNw 提取码:vd5v 一.获取数据库连接 1. Driver接口介绍 ja ...

  5. Springboot开发web项目

    当前,Spring毫无疑问已经成为java后台对象管理标准框架,除了通过IOC能够管理我们的自定义对象的生命周期之外还提供了众多功能繁复的可配置功能模块.但同时带来了复杂的配置项,这对初学者而言简直是 ...

  6. [转]Nginx介绍-反向代理、负载均衡

    原文:https://www.cnblogs.com/wcwnina/p/8728391.html 作者:失恋的蔷薇 1. Nginx的产生 没有听过Nginx?那么一定听过它的"同行&qu ...

  7. 动态生成HTML元素-模拟在线考试功能

    前言 我们在项目开发过程中,经常会遇到页面html元素无法提前预设,而是通过某一些条件动态生成的情况,这里我们需要考虑如下几个因素: 1.需要动态创建的元素类型,比如TextBox, Radio, C ...

  8. 数据分析学习 third week （7.29~8.4）

    概率分布简介 简单地介绍下常用概率分布的理论知识. 基础概念 1.概率 概率直观上是指一个事件发生可能性大小的数量指标 概率的统计定义:在不变的条件下,重复进行$n$次试验,事件$A$发生的频率稳定在 ...

  9. 数据分析second week（7.22~7.28）

    描述性统计Python实现 这周学习时间也就几个小时,由于python也正在学习,Anaconda也有,所以那些安装啥的就偷懒下不写了,直接贴出python代码 数据是随机生成,计算是调用库里的函数. ...

  10. “随手记”开发记录day03

    今天完成了进入页面 还有记账页面 出现的问题,在登录页面中由于布局采用的错误 后边的view把前面的view遮住,看不出来,我们查找方法,找到了设置权重的办法解决 明天打算完成加号里面的内容