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和移动端)

    jQuery实现瀑布流布局详解(PC和移动端)

    这篇文章非常全面的介绍了在PC和移动端上jQuery实现瀑布流布局的详细过程,文中示例代码介绍的非常详细,具有一定的参考价值,对瀑布流布局感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jquery form 加载数据示例

    jquery form 加载数据示例

    这篇文章主要介绍了jquery form 加载数据的具体实现,需要的朋友可以参考下
    2014-04-04
  • JQuery在页面中添加和除移DOM示例代码

    JQuery在页面中添加和除移DOM示例代码

    本文为大家介绍下使用JQuery实现在页面中添加和除移DOM主要使用了以下几个方法,感兴趣的朋友可以了解下哈,希望对大家有所帮助
    2013-06-06
  • jQuery UI库中dialog对话框功能使用全解析

    jQuery UI库中dialog对话框功能使用全解析

    这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下
    2016-04-04
  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    jQuery结合jQuery.cookie.js插件实现换肤功能示例

    这篇文章主要介绍了jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • js+JQuery返回顶部功能如何实现

    js+JQuery返回顶部功能如何实现

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮,需要的朋友可以参考下
    2012-12-12
  • 分享我的jquery实现下拉菜单心的

    分享我的jquery实现下拉菜单心的

    jquery库给我们带来了很多方便的地方,使用jquery实现一个简单的下拉菜单已经是很简单了,但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单,参考了Xiaofeng Wang的SexyDropDownMenu2010,其中还是有一些东西感觉值得记录一下。
    2015-11-11
  • 读jQuery之十一 添加事件核心方法

    读jQuery之十一 添加事件核心方法

    上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等,但其实现的核心方法是jQuery.event.add。
    2011-07-07
  • 关于webuploader插件使用过程遇到的小问题

    关于webuploader插件使用过程遇到的小问题

    这篇文章主要为大家详细解决了关于webuploader插件使用过程遇到的小问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jQuery模拟点击A标记示例参考

    jQuery模拟点击A标记示例参考

    本文为大家带来的是jQuery模拟点击A标记,个人感觉这个示例还是不错的,需要的朋友可以参考下
    2014-04-04

最新评论