html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>jquery</title>

		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>

		<script type="text/javascript" src="js/try.js" ></script>

		<style>

			ul li {

				list-style: none;

			}

		    ul {

		    	padding:0;

		    	margin: 0;

		    }

		    .main {

		    	float:left;

		    	margin-right: 5px;

		    background-image: url(img/2.PNG);

		      background-repeat:repeat-x;

		      width:100px;

		    }

		    li {

		    	background-color: #eeeeee;

		    }

		    a {

		    	display: block;

		    	text-decoration: none;

		    	width:80px;

		    	padding-left: 20px;

		    	padding-top: 4px;

		    	padding-bottom: 4px;

		    }

		   .main a {

		   	color: white;

		   	background-image:url(img/向右箭头.png);

		   	background-repeat: no-repeat;

		   	background-position:2px center ;

		   	background-size:20px;

		   }

		  .main li a{

		  	color:black ;

		  	background-image: none;

		  }

		  .main ul {

		  	display: none;

		  }

		   </style>

	</head>

	<body>

	 <ul>

	 	<li class="main">

	 		<a href="#">菜单1</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 		<li class="main">

	 		<a href="#">菜单2</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 		<li class="main">

	 		<a href="#">菜单3</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 </ul>

	</body>

</html>

　　js

$(document).ready(function(){

	$(".main").hover(function() {

	$(this).children("ul").slideToggle();

	})

});

　　效果：

jQuery 菜单 水平菜单的实现的更多相关文章

  1. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  2. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  3. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  4. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  6. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  7. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  8. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  9. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

随机推荐

  1. 百度MIP技术快速入门（上）

    前言 「本文假定读者已经有初级的前端开发知识,包括HTML.CSS.」 百度在一年前推出了称为 MIP(Mobile Instant Pages)的前端开发组件,主要目的是加速移动端网页的显示.MIP ...

  2. 在vscode中快速生成vue模板

    点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...

  3. webRTC脱坑笔记（二）— webRTC API之MediaStream(getUserMedia)

    webRTC API WebRTC API包括媒体捕获.音频视频的编码和解码.传输层和会话管理. getUserMedia():捕获音频和视频. MediaRecorder:录制音频和视频. RTCP ...

  4. sublime text3 手动安装插件package control

    好久没写了,今天换了新电脑,先安装前端神器“sublime” 一,安装 下载sublime,官方网址:http://www.sublimetext.com/: 二.插件包安装( Package Con ...

  5. 【加密】RSA验签及加密

    通过OpenSSL生成公私钥文件(如果没有OpenSSL工具建议下载Cmder工具自带OpenSSL指令) 1.生成RSA密钥的方法 genrsa -out private-rsa.key 2048 ...

  6. auto_now_add与auto_now的区别

  7. JavaScript中的回调地狱及解决方法

    1.回调地狱 在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱.比如说你要把一个函数 A 作为回调函数,但 ...

  8. Redis集群的搭建【转】

    redis集群的特点: 1.机器多,能够保证redis服务器出现问题后,影响较小 2.自备主从结构,自动的根据算法划分主从结构.动态的实现 3.能够根据主从结构自动的实现高可用 4.实现数据文件的备份 ...

  9. python之正则表达式（re模块）用法总结

    用一句表示正则表达式,就是 字符串的模糊 匹配

  10. Toposort（拓扑排序）dfs递归模板

    最近刷了几题拓扑排序的题,记录一下拓扑排序 在有向图中,并且按照一定的规则(题目所给的规则)排序.如果图中出现了有向环的话就无法排序了. int gap[maxn][maxn];//记录下有向边 in ...