太简单了，不多说，但是自己还是写了一会，因为总会出现这样那样小的错误，毕境最近在复习和学习一些前台，欢迎看到的各位能给点改进意见或者其它的，Thank you!

首先是发图，只用CSS写了结构，几乎没加任何修饰，因为现在不是做那个的时候；

说明：如图一横向的菜单，当鼠标悬浮在上边时，下拉菜单出现，当鼠标不在上边时下拉菜单隐藏，仅此而已

环境：FireFox 23.0.1

aaarticlea/png;base64,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" alt="" />

原代码，都在一个页面中吧，只是为了学习而已

<!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" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

	<title></title>

	<style type="text/css">

		#menu ul{

			padding:0;margin:0;

		}

		#menu li{

			position:relative;

			width:100px;

			display:inline-block;

		}

		#menu li ul{

			position:absolute;

			top:100%;

			left:0;

			height:auto;

			background-color:white;

		}

	</style>

</head>

<body>

	<a href="javascript:void(0)" onClick="menu()">Bind The Click</a>

	<ul id="menu">

		<li>

			Home

			<ul>

				<li>Home</li>

				<li>Product</li>

				<li>Address</li>

				<li>Contract</li>

				<li>Help</li>

			</ul>

		</li>

		<li>Product</li>

		<li>Address</li>

		<li>Contract</li>

		<li>

			Help

			<ul>

				<li class="home">Home</li>

				<li>Product</li>

				<li>Address</li>

				<li>Contract</li>

				<li>Help</li>

			</ul>

		</li>

	</ul>

	<script type="text/javascript">

	function menu(){

		var elem=document.getElementById("menu");

		var ul=elem.getElementsByTagName("ul")

		for(var i=0;i<ul.length;i++){

			ul[i].style.display="none";

		}

		//bind the action

		var li=elem.getElementsByTagName("li");

		for(var i=0;i<li.length;i++){

			li[i].onmouseover=function(){

				var inli=this.getElementsByTagName("ul");

				for(var j=0;j<inli.length;j++){

						inli[j].style.display="block";

				}

			};

			li[i].onmouseout=function(){

				var inli=this.getElementsByTagName("ul");

				for(var j=0;j<inli.length;j++){

						inli[j].style.display="none";

				}

			}

		}

	}

	window.onload=menu();

	</script>

</body>

</html>

用js写的极简的导航菜单，带下拉列表的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. tinyriscv---一个从零开始写的极简、易懂的开源RISC-V处理器核

    本项目实现的是一个微riscv处理器核(tinyriscv),用verilog语言编写,只求以最简单.最通俗易懂的方式实现riscv指令的功能,因此没有特意去对代码做任何的优化,因此你会看到里面写的代 ...

  3. js写的一个简单的手风琴菜单

    1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...

  4. 用js写的简单的下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  6. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  7. 自制 os 极简教程1：写一个操作系统有多难

    为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...

  8. 极简Node教程-七天从小白变大神（一：你需要Express）

    如果说用一句话来概括Node那就是:它开启了JavaScript服务器端语言. Node系列的文章并不会从一开始长篇概论的讲Node的历史,安装,以及其他很琐碎的事情.只会专门介绍关于Node或者准确 ...

  9. AI 绘画极简教程

    昨天在朋友圈发了几张我用AI绘画工具Disco Diffusion画的画 既然有同学问,就写个极简教程吧,画个图是足够了,想要深入了解还是自行百度吧,可以找到更详细的教程. 第 0 步:学会上网,注册 ...

随机推荐

  1. centos关闭防火墙

    Centos7 关闭防火墙 CentOS 7.0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下 1.直接关闭防火墙 systemctl stop firewalld.se ...

  2. centeros bash: ifconfig: command not found

    如果ifconfig命令不存在 yum upgrade yum install net-tools

  3. apachetop 实时监控apache指定日志

    编译安装,压缩包戳我下载 帮助文档 # apachetop -h ApacheTop v0.12.6 - Usage: File options: -f logfile open logfile (a ...

  4. Java-马士兵动态代理模式

    Java-马士兵动态代理模式 模拟jdk的动态代理的实现原理, 这些东西没有必要写出来,写项目的时候一般用不上,主要是为了面试和理解原理: java动态代理有什么作用 作用非常大,在很多底层框架中都会 ...

  5. Shell 重定向

    一直没搞懂 &> 和 <& 是表示什么意思. 今天自己总结一下,希望自己能理解它的真正含义. 重定向标准输入输出,切记 “1” 和 “>”之间没有空格 $ > ...

  6. bootstrap 部分css样式

    clip: rect(0, 0, 0, 0);剪裁绝对定位元素.outline: 0; cursor: not-allowed;

  7. ORM系列之二：EF（5） Model First

    前面我们已经介绍过EF中Code First开发模式,简而言之,就是不管三七二十一直接写代码,不过对于很多开发人员来说,可能并不习惯这样来开发,并且安装标准的开发流程,应该是先建模再进行编码,当然EF ...

  8. C#程序以管理员权限运行

    原文:C#程序以管理员权限运行 C#程序以管理员权限运行 在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员 ...

  9. SQL2014 error 40 ( Microsoft SQL Server, 错误2)

    可能是安装了SQL EXPRESS版 尝试使用(local)\SQLEXPRESS 作为服务器名称登陆. 用 计算机名\实例名  作为用户名登录.

  10. 使用sql server 链接服务器

    在我们的日常应用场景中经常会碰访问不同服务器上的数据库,即跨服务器访问操作不同的服务器上的SQL Sever数据库, 这个时候Sql Server的链接服务器就非常实用,创建SQL语句如下: --重新 ...