js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。

<!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>
		<title>下拉菜单</title>
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<style type="text/css">
			.navi ul {
				padding: 0;
				list-style-type: none;
			}
			.navi ul li {
				text-align: center;
				float: left;
				position: relative;
				width: 200px;
				background-color: #0F8CFF;
			}
			a {
				color: #086808;
				text-decoration: none;
			}
			.navi ul li a {
				display: block;
				border: 1px solid #fff;
			}
			.navi ul li ul {
				display: none;
				left: 0;
			}
			.navi ul li ul li ul{
				position: absolute;
				left:200px;
				top: 0;
			}
			.navi ul li:hover ul a {
				color: yellow;
			}
		</style>

		<script type="text/javascript">
			function showNextMenu(obj){
				var nextMenu = obj.getElementsByTagName("ul")[0];
				nextMenu.style.display = "block";
			}
			function hideNextMenu(obj){
				var nextMenu = obj.getElementsByTagName("ul")[0];
				nextMenu.style.display = "none";
			}
		</script>
	</head>

	<body>

		<div class="navi">
			<ul >
				<li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
							<a href="javascript:;" >传奇</a>

							<ul>
								<li>
									<a href="javascript:;" >1</a>
								</li>
								<li>
									<a href="javascript:;" >2</a>
								</li>
								<li>
									<a href="javascript:;" >3</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>

</html>

效果图如下: 

 

时间: 07-04

js控制的多级下拉菜单的相关文章

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

bootstrap 多级下拉菜单

如上效果: 实现代码: 导入js和css: 1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></scri

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

下拉菜单之纯CSS实现

最近对一批学员进行网页培训,应他们要求,将这些课堂知识整理出来,供他们参考和回忆.当然,小寻哥是不愿意这么做的,毕竟白天培训+写项目,没有时间整理(当然是意味晚上整理啦).哎,但是架不住前端美女的要求,答应了就只能照办了. 这里也给其他刚入门的小虾们头参考下吧.(部分整理,毕竟有些机密还是不能外泄的) 直接上代码,你们运行下吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

css+html+js实现多级下拉和弹出菜单

本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 首先应该写html部分的代码,代码比較简单,代码例如以下: <body> <div id="men

用JS控制下拉菜单效果

今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写,用户体验重要,码农审美也很重要啊,O(∩_∩)O~ 在做下拉菜单的过程中,有以下心得: 1.this是个好东西,比如在鼠标事件中,它代表此时的鼠标事件对象本身,免去去用其他方式代表改对象的麻烦: 2.getElementsByTagName或者getElementById方法获得的是一个数组,需要

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

效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base ta

jQuery cxSelect 多级联动下拉菜单

随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQuery 多级联动菜单插件.它适用于各省.动菜单. 列表数据通过 AJAX 获取(须要在server环境执行),也能够使用变量自己定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点须要学

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t