<!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. 记一次svg反爬学习

    网址:http://www.porters.vip/confusion/food.html 打开开发者工具后 页面源码并不是真实的数字,随便点一个d标签查看其样式 我们需要找到两个文件,food.cs ...

  2. 使用Gateway配置路由以及动态路由

    1. 新建module cloud-gateway-gateway9527 2. pom.xml <!--注意不需要web模块依赖,否则报错--> <?xml version=&qu ...

  3. pandas_数据排序

    import pandas as pd # 设置列对齐 pd.set_option("display.unicode.ambiguous_as_wide",True) pd.set ...

  4. zabbix 监控nginx状态

    1. 安装nginx,参考其它 [root@iZ2zeapnvuohe8p14289u6Z /]# vim /etc/nginx/nginx.conf # 加上下面 location /nginx_s ...

  5. 自述：自学Java应该注意什么问题？

    Hello,大家好,我是若风,我是一名IT从业者,纵观当今局势,国内IT互联网行业发展是比较好的,当然学IT技术的人员也特别多,网上的学习资源也非常多,现在有很多人在学技术,想想要进入到 IT这个行业 ...

  6. CI/CD：Jenkins的流水线demo入门

    在敏捷开发或者devops中,Jenkins常常作为CI/CD的主选平台,而流水线(Pipeline)是CI/CD的一个常见的体现形式,通过流水线,我们可以配置一个从编译打包,部署,自动化测试,到产品 ...

  7. 验证Kubernetes YAML的最佳实践和策略

    本文来自Rancher Labs Kubernetes工作负载最常见的定义是YAML格式的文件.使用YAML所面临的挑战之一是,它相当难以表达manifest文件之间的约束或关系. 如果你想检查所有部 ...

  8. 使用 Python 为女神挑选口红

    口红对于女生来说永远不嫌多,而男生也搞不明白珊瑚红.番茄色.斩男色等等颜色有什么区别,不都是红色么?当送给女神的口红是她不适合的,那结果就是口红进入垃圾箱还算是轻的,重则拉黑处理.男生们也不用着急,我 ...

  9. easyPOI使用

    更多的easyPOI资源的网在easypoi的官网. 1 在pom.xml中添加依赖 <dependency> <groupId>cn.afterturn</groupI ...

  10. 恢复HTML表格笔记

            表格         语法:          标记:            <table></table>:表示一个表格                属性: ...