jQuery下拉菜单的实现代码

更新时间：2016年11月03日 10:36:27 作者：李璐誉

这篇文章主要介绍了jQuery下拉菜单的实现代码的相关资料,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下

jQuery是一款流行已久的Javascript框架,确实很好用。今天我给大家介绍jquery下拉菜单的实现代码，具体代码如下所述：

<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
* {
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;
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;
<script src="jquery-1.11.1.min.js"></script>
$(document).ready(function () {
$(".wrap li").hover(function () {
});
<div class="wrap">
<a href="#">中国</a>
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<a href="#">美国</a>
<li><a href="#">旧金山</a></li>
<li><a href="#">华盛顿</a></li>
<li><a href="#">西雅图</a></li>
<a href="#">英国</a>
<li><a href="#">伦敦</a></li>
<li><a href="#">爱丁堡</a></li>
<li><a href="#">伯明翰</a></li>
<a href="#">南非</a>
<li><a href="#">约翰内斯堡</a></li>
<li><a href="#">伊丽莎白港</a></li>
<li><a href="#">茨瓦内</a></li>
</li><li>
<a href="#">澳大利亚</a>
<li><a href="#">堪培拉</a></li>
<li><a href="#">悉尼</a></li>
<li><a href="#">墨尔本</a></li
</ul></html>

以上所述是小编给大家介绍的jQuery下拉菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

jQuery实现瀑布流布局详解（PC和移动端）
这篇文章非常全面的介绍了在PC和移动端上jQuery实现瀑布流布局的详细过程，文中示例代码介绍的非常详细，具有一定的参考价值，对瀑布流布局感兴趣的小伙伴们可以参考一下
2015-10-10
jquery form 加载数据示例
这篇文章主要介绍了jquery form 加载数据的具体实现,需要的朋友可以参考下
2014-04-04
JQuery在页面中添加和除移DOM示例代码
本文为大家介绍下使用JQuery实现在页面中添加和除移DOM主要使用了以下几个方法，感兴趣的朋友可以了解下哈，希望对大家有所帮助
2013-06-06
jQuery UI库中dialog对话框功能使用全解析
这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下
2016-04-04
jQuery结合jQuery.cookie.js插件实现换肤功能示例
这篇文章主要介绍了jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下
2017-10-10
js+JQuery返回顶部功能如何实现
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮,需要的朋友可以参考下
2012-12-12
分享我的jquery实现下拉菜单心的
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。
2015-11-11
读jQuery之十一添加事件核心方法
上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等，但其实现的核心方法是jQuery.event.add。
2011-07-07
关于webuploader插件使用过程遇到的小问题
这篇文章主要为大家详细解决了关于webuploader插件使用过程遇到的小问题,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
jQuery模拟点击A标记示例参考
本文为大家带来的是jQuery模拟点击A标记，个人感觉这个示例还是不错的,需要的朋友可以参考下
2014-04-04