<!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. SPOJ1421_Goods_循环节

    题意:1-n的一个排列,两两互换,每个位置每天只能做一次交换,问最多几天能交换成1-n,并且输出交换步骤. 解法:把该置换中所有的循环节找出,各循环节之间的交换是并行的,两两不相关,每天只需在循环节内 ...

  2. SYN5301型 毫秒表时间检定仪

       SYN5301型  毫秒表时间检定仪 频率记录仪时间记录仪时间频率信号的精密测量使用说明视频链接; http://www.syn029.com/h-pd-76-0_310_6_-1.html 请 ...

  3. 30442数据操纵语言DML

    5.5 SQL的数据操纵功能 5.5.1 数据插入 使用CREATE语句创建的数据表还只是一个“空壳”,表中没有任何数据.利用SQL语言提供的INSERT语句可以完成向数据表插入数据的任务. INSE ...

  4. Docker+ Kubernetes已成为云计算的主流（二十五）

    前言 最近正在抽时间编写k8s的相关教程,很是费时,等相关内容初步完成后,再和大家分享.对于k8s,还是上云更为简单.稳定并且节省成本,因此我们需要对主流云服务的容器服务进行了解,以便更好地应用于生产 ...

  5. ZooKeeper学习第三期---Zookeeper命令操作（转）

    转载来源:https://www.cnblogs.com/sunddenly/p/4031881.html 一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他 ...

  6. Java虚拟机详解（一）------简介

    本系列博客我们将以当前默认的主流虚拟机HotSpot 为例,详细介绍 Java虚拟机.以 JDK1.7 为主,同时介绍与 JDK1.8 的不同之处,通过Oracle官网以及各种文献进行整理,并加以验证 ...

  7. Netty源码分析--创建Channel（三）

    恩~,没错,其实这一篇才是真正的开始分析源码,你打我呀~. 先看一下我Netty的启动类 private void start() throws Exception { EventLoopGroup ...

  8. Django框架之前端渲染-模板层

      Django 模板层   Django 模板层 前后端数据传递 (1) 后端朝前端页面传递数据的方式: # 将当前所在的名称空间中的名字全部传递给前端页面 # 第一种 return render( ...

  9. 关于vue项目中在js中引入图片问题

    <template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...

  10. 深度探索c++对象模型 第一章

    1,声明与定义. //声明式如下: extern int x;   //对象式(变量式)声明 std::size_t numDigits(int number);  //函数式声明 class Wid ...