<!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. Android Zero (开篇)

    Android Zero == 从零开始 本文章主要打算给将要入门Android或刚刚入门Android的小伙伴适用的,开篇的几个案例都会抛弃所有现在用到的新技术和第三方框架,用最原生的方法从0演示, ...

  2. GitOps初阶指南：将DevOps扩展至K8S

    本文转自Rancher Labs 在过去十年的编程中,出现了一些革命性的转变.其中之一是源于围绕DevOps的实践,它将开发和运维团队整合到一个共享的工作流程中,此外还有持续集成和持续交付(CI/CD ...

  3. Python os.lchmod() 方法

    概述 os.lchmod() 方法用于修改连接文件权限.高佣联盟 www.cgewang.com 只支持在 Unix 下使用. 语法 lchmod()方法语法格式如下: os.lchmod(path, ...

  4. PHP pack() 函数

    实例 把数据装入一个二进制字符串: <?phpecho pack("C3",80,72,80);?>高佣联盟 www.cgewang.com 定义和用法 pack() ...

  5. PHP strrchr() 函数

    实例 搜索 "world" 在字符串中的位置,并返回从该位置到字符串结尾的所有字符: <?php高佣联盟 www.cgewang.comecho strrchr(" ...

  6. PHP strnatcmp() 函数

    实例 使用"自然"算法来比较两个字符串(区分大小写): <?php高佣联盟 www.cgewang.comecho strnatcmp("2Hello world! ...

  7. 7.29 NOI模拟赛 题答 npc问题 三染色 随机 贪心

    LINK:03colors 这道题虽然绝大多数的人都获得了满分 可是我却没有. 老师讲题的时候讲到了做题答的几个技巧 这里总结一下. 数据强度大概为n=5000,m=60000的随机数据. 老师说:一 ...

  8. 5.19 省选模拟赛 小B的图 最小生成树 LCT

    LINK:小B的图 这道题就比较容易了. 容易想到将询问离线 然后 从小到大排序 那么显然是优先放正图(x+k)的边. 考虑随着x的增大 那么负图上的边会逐渐加进来 一条边被加进来当且仅当 其权值小于 ...

  9. 银弹谷V百科|使用技巧：Vbase技巧二则之一

    银弹谷零代码开发V平台提供访问窗体的短地址链接 格式:http://IP:port/form/componentCode/windowCode  例子: 默认地址:http://IP:port/mod ...

  10. java学习day01之String的特点，如何实现，并且有哪些重要方法？

    1.以主流的JDK版本1.8来说,String内部实际存储结构为char数组,源码如下: public final class String  implements java.io.Serializa ...