<!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. Hive学习之路（一）—— Hive 简介及核心概念

    一.简介 Hive是一个构建在Hadoop之上的数据仓库,它可以将结构化的数据文件映射成表,并提供类SQL查询功能,用于查询的SQL语句会被转化为MapReduce作业,然后提交到Hadoop上运行. ...

  2. 【转+存】JVM指令集

    jvm指令集: 转载地址:https://www.cnblogs.com/yaoyinglong/p/4300447.html 一.未归类系列A 此系列暂未归类. 指令码    助记符         ...

  3. List中的set方法和add方法

    public class TestList {public static void main(String[] args){   List l1 = new LinkedList();   for(i ...

  4. Docker中使用CentOS7镜像

    因后面会将操作系统从CentOS6.4升级到CentOS7,先试用下CentOS7. 启动容器服务 systemctl start docker.service 下载CentOS7 镜像   [roo ...

  5. GRPC 截止时间与元数据

    截止时间 gRPC 允许客户端在调用一个远程方法前指定一个最后期限值.这个值指定了在客户端可以等待服务端多长时间来应答,超过这个时间值 RPC 将结束并返回DEADLINE_EXCEEDED错误.在服 ...

  6. C语言：正负数之间取模运算（转载）

    如果 % 两边的操作数都为正数,则结果为正数或零:如果 % 两边的操作数都是负数,则结果为负数或零.C99 以前,并没有规定如果操作数中有一方为负数,模除的结果会是什么.C99 规定,如果 % 左边的 ...

  7. springboot使用RabbitMQ实现延时任务

    延时队列顾名思义,即放置在该队列里面的消息是不需要立即消费的,而是等待一段时间之后取出消费.那么,为什么需要延迟消费呢?我们来看以下的场景 订单业务: 在电商/点餐中,都有下单后 30 分钟内没有付款 ...

  8. 微信支付重复回调，java微信支付回调问题

    这几天一直在研究微信支付回调这个问题,发现之前微信支付回调都是正常的也没怎么在意,今天在自己项目上测试的时候发现相同的代码在我这个项目上微信支付回调老是重复执行导致支付成功之后的回调逻辑一直在执行,很 ...

  9. JS高级程序设计第3章--精简版

    前言:纯手打!!!按照自己思路重写!!!这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第三章:基本概念(语法.数据类型.流控制语句.函数) 3 ...

  10. websocket实现群聊和单聊(转)

    昨日内容回顾 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user") 3.m ...