<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

*{

    padding:0;

    margin:0;

}

.menu {

    width: 120px;

    background-color: #CCC;

    position: relative;

    height: 26px;

}

.menu .sub {

    position: absolute;

    display:none;

    left: 0px;

    top: 26px;

    background-color: #9CF;

    width: 100%;

}

</style>

<script src="jquery-3.2.1.min.js"></script>

<script>

$(function(){

    $('.menu').mouseover(function(e){

      $(this).find('.sub').toggle();

    });

    $('.menu').mouseout(function(e){

      $(this).find('.sub').toggle();

    });

});

</script>

</head>

<body>

<div class="menu">

<span>按钮</span>

<dl class="sub">

<dd><a href="">选项1</a></dd>

<dd><a href="">选项2</a></dd>

<dd><a href="">选项3</a></dd>

</dl>

</div>

</body>

</html>

jquery实现最简单的下拉菜单的更多相关文章

  1. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  2. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  3. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  4. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  6. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  7. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  8. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  9. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

随机推荐

  1. Hadoop集群（第5期）SecureCRT使用

    1.SecureCRT简介   SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,同时支持Telnet和rlogin协议.SecureCRT是一款用于连接运行包括Windows. ...

  2. Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转

    同一文档,在不同的文档查看器或者编译环境中,需要对该文档进行相应的格式转换.下面的内容中,将介绍通过Java编程来实现PPT文档格式转换的方法. 使用工具: Spire.Presentation fo ...

  3. SYN5605型 多通道时间间隔测量仪

      SYN5605型 多通道时间间隔测量仪 时间间隔测量设备多通道时间间隔测量32路时间间隔测量仪使用说明视频链接; http://www.syn029.com/h-pd-80-0_310_6_-1. ...

  4. C语言实现常用排序算法——基数排序

    #include<stdio.h> #include<math.h> #define SIZE 10 #define C_SIZE 20 /*行数稳定=10,切记!列数务必搞的 ...

  5. 通往Google之路：***

    *** & BBR 安装 系统支持:CentOS 6+, Debian 7+, Ubuntu 12+ 内存要求:≥128M --- 前提 满足以上要求的VPS服务器一台 安装基础命令工具:yu ...

  6. Kafka 学习之路（四）—— Kafka消费者详解

    一.消费者和消费者群组 在Kafka中,消费者通常是消费者群组的一部分,多个消费者群组共同读取同一个主题时,彼此之间互不影响.Kafka之所以要引入消费者群组这个概念是因为Kafka消费者经常会做一些 ...

  7. 使用 cxf的程序 在win10 测试部署时报空指针异常

    2018-11-08 15:50:55.072 DEBUG 21524 --- [nio-8080-exec-1] o.s.b.w.s.f.OrderedRequestContextFilter  : ...

  8. Oracle基础学习笔记

    Oracle基础学习笔记 最近找到一份实习工作,有点头疼的是,有阶段性考核,这...,实际想想看,大学期间只学过数据库原理,并没有针对某一数据库管理系统而系统的学习,这正好是一个机会,于是乎用了三天时 ...

  9. GBDT--原来是这么回事(附代码)

    1. 解释一下GBDT算法的过程 GBDT(Gradient Boosting Decision Tree),全名叫梯度提升决策树,使用的是Boosting的思想. 1.1 Boosting思想 Bo ...

  10. Docker-Compose搭建单体SkyWalking

    SkyWalking简介 SkyWalking是一款高效的分布式链路追踪框架,对于处理分布式的调用链路的问题定位上有很大帮助 有以下特点: 性能好 针对单实例5000tps的应用,在全量采集的情况下, ...