<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}

.wrap {
width: 730px;
height: 50px;
margin: 100px auto 0;
background-color: lightgray;
padding-left: 10px;
border-radius: 10px;
padding-bottom: 3px;
}

.wrap li {
float: left;
width: 130px;
height: 50px;
margin-right: 10px;
position: relative;
}

.wrap a {
margin-top: 3px;
color: gray;
text-decoration: none;
display: block;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
background:lightgray;
font-size: 21px;
border-radius: 10px;
}

.wrap li ul {
position: absolute;
display: none;
}
.wrap li ul li {
margin-top: 3px;
}
.wrap li ul li a:hover{
color: red;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {

$(".wrap li").hover(function () {
$(this).children("ul").slideToggle();
});

});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">中国</a>
<ul>
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
</ul>
</li>
<li>
<a href="#">美国</a>
<ul>
<li><a href="#">旧金山</a></li>
<li><a href="#">华盛顿</a></li>
<li><a href="#">西雅图</a></li>
</ul>
</li><li>
<a href="#">英国</a>
<ul>
<li><a href="#">伦敦</a></li>
<li><a href="#">爱丁堡</a></li>
<li><a href="#">伯明翰</a></li>
</ul>
</li><li>
<a href="#">南非</a>
<ul>
<li><a href="#">约翰内斯堡</a></li>
<li><a href="#">伊丽莎白港</a></li>
<li><a href="#">茨瓦内</a></li>

</ul>
</li><li>
<a href="#">澳大利亚</a>
<ul>
<li><a href="#">堪培拉</a></li>
<li><a href="#">悉尼</a></li>
<li><a href="#">墨尔本</a></li

</ul>
</li>
</ul>
</div>
</body>
</html>

JQuery里面的下啦菜单的更多相关文章

  1. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  2. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  3. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  4. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  5. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  6. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery cxSelect 联动下拉菜单

    插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...

  8. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

  9. jquery mobile selectmenu下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. jquery多级树形下拉菜单

    效果图: 使用方法 (1)引入 jQuery 包,下载地址 (2)引入 zTree 包,下载地址 (3)引入 tree-select.js (4)$("#id").treeSele ...

随机推荐

  1. Python 3基础教程9-函数

    本文介绍Python中的函数,主要了解如何定义一个函数,如何调用一个函数. 如果上面你不写调用函数这行代码,你运行后,是没有打印输出的.我们这里来,结合前面的if语句来定义一个,两个数比较,判断最大的 ...

  2. python 读取数据库中文内容显示一堆问号

    需要在连接数据库时 设置编码格式 def select_db(self,db_name): self.conn = MySQLdb.connect( host = self.ip, port = se ...

  3. msql 数据库介绍和启动

    什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储在文件中,但 ...

  4. Spring Boot多数据源配置（一）durid、mysql、jpa整合

    目前在做一个统计项目.需要多数据源整合,其中包括mysql和mongo.本节先讲mysql.durid.jpa与spring-boot的整合. 引入Durid包 <dependency> ...

  5. 孤荷凌寒自学python第四十七天通用跨数据库同一数据库中复制数据表函数

    孤荷凌寒自学python第四十七天通用跨数据库同一数据库中复制数据表函数 (完整学习过程屏幕记录视频地址在文末) 今天继续建构自感觉用起来顺手些的自定义模块和类的代码. 今天打算完成的是通用的(至少目 ...

  6. JSP/Servlet Web 学习笔记 DayFour

    Servlet概述 Servelt是使用Java Servlet应用程序接口及相关类和方法的Java程序. Servlet是用Java编写的Server端程序,它与协议和平台无关.Servlet运行于 ...

  7. RabbitMQ吞吐量测试-PerfTest上

    RabbitMQ吞吐量测试-PerfTest上 PerfTest RabbitMQ有一个基本的吞吐量测试工具PerfTest(文档,源代码和版本),它基于Java客户端,可以配置为模拟基本工作负载.P ...

  8. hdu 1969 Pie (二分法)

    Pie Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  9. [Linux]创建和启用Swap交换区

    如果你的服务器的总是报告内存不足,并且时常因为内存不足而引发服务被强制kill的话,在不增加物理内存的情况下,启用swap交换区作为虚拟内存是一个不错的选择,我购买的DigitalOcean VPS ...

  10. [luogu4242] 树上的毒瘤

    题目描述 这棵树上有n个节点,由n−1条树枝相连.初始时树上都挂了一个毒瘤,颜色为ci.接下来Salamander将会进行q个操作. Salamander有时会修改树上某个点到另外一个点的简单路径上所 ...