太简单了，不多说，但是自己还是写了一会，因为总会出现这样那样小的错误，毕境最近在复习和学习一些前台，欢迎看到的各位能给点改进意见或者其它的，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. python实现之决策树

    一.Predict survival on the Titanic 使用泰坦尼克号上的乘客数据,对乘客是否存活进行预测 1.观察数据集合 可能遇到的问题 训练集和测试集特征值得属性并不重合.连续属性和 ...

  2. Matlab的标记分水岭分割算法

    1 综述 Separating touching objects in an image is one of the more difficult image processing operation ...

  3. java 启动 shell脚本

    run.sh p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #000000 ...

  4. java容器collection的一些简单特点

    1.List ArrayList 可随机访问元素,但中间插入和一处元素较慢 LinkedList 在中间进行的插入和删除操作代价较小,随机访问比ArrayList较慢 特性集比ArrayList大 2 ...

  5. php套件 wampserver 常见问题

    安装问题 dll 丢失 今天手贱升级了win10,重新安装了一下php的套件,提示有几个组件找不到,其中有一个msvcr100.dll丢失. google了一下: youtube视频:Windows ...

  6. Robot Framework 的安装和配置（转载）

    Robot Framework 的安装和配置 在使用 RF(Rebot framework)的时候需要 Python 或 Jython 环境,具体可根据自己的需求来确定.本文以在有 Python 的环 ...

  7. PHPUnit入门

    PHPUnit是PHP语言的单元测试框架.工具,xunit单元测试工具系列成员之一,可以单独运行在Linux或windows系统下面,也可以集成到zend studio等IDE工具中. 工具下载:ht ...

  8. Linux分区方案 (转)

    以下是我的centOS6.2系统分区方案,做个记录,方便后续的参考. 根分区: >= 3G /boot (启动分区): 100M即可. /swap : 网上说是物理内存的两倍,实际随便你,看自己 ...

  9. Raspberry pi 添加vnc远程桌面控制

    // 安装服务 apt-get install tightvncserver // 设置连接密码 vncpasswd // 在端口1处开启服务 tightvncserver :1

  10. JsonProperties对模型返回的应用

    在采用springMvc+Mybatis的架构中.数据库已经建好,数据库和需要返回的实体共用一个model.一切都井然有序,看起来很美好. 返回的代码都如下这样 @RequestMapping(&qu ...