<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两级下拉菜单</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>
</head>
<body>
<ul id="mainNav" class="nav" >
<li><a href="javascript:void(0);">首 页</a></li>
<li><a href="javascript:void(0);">导航菜单</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" >企业采购</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">行情报价</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li>
</ul>
</li>
</ul>
<script language="JavaScript" type="text/javascript">
// <!--
$(document).ready(function(){
var li = $("#mainNav > li"); //找到#mainNav中子元素li；
var ul;
li.each(function(i){ //循环每一个LI
li.eq(i).hover(
function(){
$(this).find("ul").show(); //找到li里面的ul元素设置为显示
},
function(){
$(this).find("ul").hide();
}
)
})
})
//-->
</script>
</body>
</html>
相关推荐
你肯定喜欢的jquery两级下拉菜单，这个菜单功能挺灵活，可以在下拉的二级菜单中布局图片和文字，或者是LI文字列表，或者是其它的菜单布局，经测试，兼容性表现也挺好，可在IE8、IE9、火狐和Chrome等浏览器下完美运行...
这是一款基于jquery实现的黑色风格下拉菜单插件附用法代码，一个经典形式的下拉菜单，大家在网上已经见到过比较多的这种菜单了，本款插件实现的菜单兼容各大浏览器，比较稳定，可以支持两级子菜单。风格和字体样式在...
主要介绍了jQuery简单实现两级下拉菜单效果代码,基于jQuery遍历简单实现菜单效果,非常具有实用价值,需要的朋友可以参考下
黑色样式的jquery下拉菜单【两级菜单】，具有缓冲动画效果，在火狐或Chrome浏览器下，还可看到立体效果的菜单背景，并支持鼠标悬停响应效果，核心代码：CSS、jQuery、JavaScript。
基于 jQuery 的两级横向菜单 带动态效果，全部是由jquery CSS代码完成，菜单很简洁，使用背景色平铺而成，因此没有使用GIF等图像资源，这个菜单可以两级展开，当把鼠标放在主菜单的某一项的时候，其二级子菜单便会...
前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...
jquery实现一个风格简洁的多级水平展开、垂直下拉的网站菜单，基于jQuery的横向展开/纵向下拉菜单代码,Js下拉菜单代码。页面里一共包括了两款菜单，一款是标准的横向排列菜单，鼠标放在菜单项上时，菜单会向下滑出二...
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的导航菜单，淡入淡出二级的菜单导航，很经常见到的效果，这里使用的是jquery-1.6.2版本的JS，...
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下： jQuery代码实现的二级导航菜单效果，非常简洁，喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级，CSS的配合也是挺重要的...
jquery-accordion-menu-multilevel是一款非常酷的Material Design风格多级下拉列表菜单jQuery插件。该下拉列表在菜单项点击时采用漂亮的点击波特效，并提供了三种预设的颜色主题样式。
前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...
解压密码：RJ4587 今天我们要来分享一款非常简单的jQuery/CSS3下拉菜单，这款菜单一共有两级子菜单，在子菜单展开的时候伴有淡入淡出的动画效果，菜单的背景是黑色的，显得比较庄重和大气。另外，如果能将菜单配置成...
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码。分享给大家供大家参考。具体如下： 这里介绍的是一款黑红带渐变的网站下滑导航菜单，基于jquery实现的下滑线导航菜单，鼠标经过主菜单的时候，...
下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下 运行效果图： 具体代码： 第一步：确定导航的html...
这里演示了仿Google风格的下拉菜单，其核心实际上是jquery.fixedMenu菜单，使用了jquery.fixedMenu.js和fixedMenu_style.css文件，已在代码中加注释，你可以从本代码中分享现这两个文件，然后重新引用。本菜单在鼠标...
本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容也随着改变。 实现原理：根据大类的值，通过jQuery把值传给后台PHP处理，PHP通过查询...
黑色的jquery css网站多级菜单，支持两级，下拉式显示子菜单，黑色风格，这个下拉菜单，是当鼠标单击主菜单项后边的小三角时，二级子菜单才会没出来，萝卜白菜各有所爱吧，有些人觉得这样可控性更好，有些人觉得不太...
1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...
主要为大家详细介绍了Bootstrap实现下拉菜单多级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下