<!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. myeclipse2018的下载安装教程

    首先注意事项!!!!!!! 在安装破解前是不可以打开软件的 jdk版本不能是10版本,1.8或1.9都可以 附上MyEclipse2018的百度云下载链接: 链接:https://pan.baidu. ...

  2. abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器（六）

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  3. 《Effective Java》-——用私有构造器或者枚举类型强化Singleton属性

    Singleton指仅仅被实例化一次的类.Singleton通常被用来代表那些本质上唯一的系统组件,比如窗口管理器或者文件系统.使类成为Singleton会使它的客户端测试变得十分困难,因为无法给Si ...

  4. js api 之 fetch、querySelector、form、atob及btoa

    js api 之 fetch.querySelector.form.atob及btoa 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.htm ...

  5. 面试超火题 This的问题！！！

    this问题 (1)this是js的一个关键字,指定一个对象,然后替代this: 函数中的this指向行为发生的主体,函数外的this都指向window,没有意义 (2)函数内的this跟函数在什么环 ...

  6. C++用EGE简单实现别踩白块游戏

    本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...

  7. 喵星人教你 HTTP 状态码

    在我们日常 Web 开发中,或多或少的都接触过 HTTP 状态码,那这些状态码代表什么意思呢?熟悉这些状态码又有什么好处呢?下面我就为大家一一道来,可以把本片文章'收藏'以备不时之需. HTTP 状态 ...

  8. C++ luogu1352没有上司的舞会 from_树形DP

    luogu1352没有上司的舞会 分析(树形DP模板题): 没学树形DP的,看一下. 把该题抽象到一颗树中,设i的下属就是他的儿子,则有两种情况: 如果i参加,他的儿子就不能参加. 如果i不参加,他的 ...

  9. HDU 4059：The Boss on Mars（数学公式+容斥原理）

    http://acm.hdu.edu.cn/showproblem.php?pid=4059 题意:给出一个n,求1~n里面与n互质的数的四次方的和是多少. 思路:不知道1~n的每个数的四次方的求和公 ...

  10. ZOJ 3963：Heap Partition（贪心+set+并查集）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3963 题意:给出一个n个数的序列,可以在其中找一个子序列建堆,并且堆中的父 ...