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

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

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

环境：FireFox 23.0.1

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhkAAACSCAIAAABnkE/uAAAJDElEQVR4nO3dUWKiMBQFUHfkilgQu2Ex7of5qEoSEur4Qgv2nJ+ZotIaI1cSzLvMABBz+e0/AIDTkyUARMkSAKJkCQBRsgSAKFkCQJQsASBKlgAQJUsAiJIln+02jtNv/w1H02oTbQXvi2fJbbxeLpfL5TJM8zzP05D+xGuejfhwHW+d9vnnXojbeG02X6tN/mpbNTzexN7J/++d4+HzMR3e9r+ny3nJbbwmjZD/xIumIelvt/Ha5T2c7fSPmMZhuG4861ab/MW2qpmG5Mg3Dec+vv2KN4+HZz9wypKjKA5lfY5s4b1M49leymkcb5tPW5ZsyZJknqMjf3v3n0P2T1nyPlnSwRGz5IQv5dehbxraf7cs2bCKkpC9+89B+6csed9W2y1Dr/eNt/F6uVyH4WuAeiwHqpOZg7/1zs4OZY+3dDb4em/KpXFXbVtuH4b7Tr/2c9//NBSPqLV5NmR+nhfjNg7jrfa2XLdJa/t2m7f6Z9pe6a9ubT+m7bHVdX979Kv1gH+9/2y1bTpnmLfU2frn1vFw4/hWdNpH2z6f6dG7T68syV/Yx7NOP+Us3fQxOZr8u+RMFkNHb72e8jdHeZx6HOmWVqy3bb69+P9zp2k7p1PV5SH4fJ+UHmMet/FaBMYL7VNkzLrNm/1zGtJPQ0OS9vXtR7WRJVv9Lf2cmD680X9qbVt+lEr76tn6Z/N4uH18a3wAShr6iE92sed5SeuVb/27fg0O9WljZxtDLJWBh+a7aio/dX+TJZs99KDv1bb6BUitNmm21Vwf7Gn3z08ZN2tmSfso3gyByqOWezV/S6VlT9c/W+cl3xzfqlmS3OOgz/Zpzywpu8Gjozaz5GzvvK62s6S8qdW272RJu82P3ntLyTxx+qe/mSWrdvluSr86EtHafkytQ3ezv72ZJfWrsiud8oz9s5Ul3xzfZMnc9bzk0I21q//Lkp7nJad7r7Zko0jN5/h+lrzUHK2P9r0u895XOqL02DJOG/2tU5asxiQ/MUu++XNlybwx15R+mlmPOq+ypOjJf+t7yP+XJa22zbbfxmt1sGAaiknS1qB+st9pOv5rkV8gmh+QvmuTbPvcaPNW/0ynRdJx8Nb2I8s6R/Zcmv1tK0tq/ad+np3Pqw/TvXlP2D+bx8Pt41t9vqT+2CPa/Xvvywj2fcv9/o8ruZ7/Jse5k1y30FHRiOvt1VtXbVs86DqOxcTo/d5fV8/VrrlpjdAc/yP1Lb8isOiHjTapbX+1zesXd720/eAq0xbzPNf6W9Zva6N5Rf/ZaNukYe/9M8uW0/TPl4+HzX6SvTEfV7oe6Sk2WI8L4IjONYEsSwAOJzllPsf5rCwBIEqWABAlSwCIkiUARMkSAKJkCQBRsgSAKPXeAYhSVxGAKFkCQJQsASBKvXcAotR7ByDqaHUV80xyagJwBuq9AxB1tPMSo1oA56PeOwBR6r0DEGU9LgCiZAkAUbIEgChZAkCULAEgSpYAECVLAIiSJQBEHTlLfO8d4Bw6ZElzxfn4Pq30CHAGfc5LsgV+l4W3Ou4UgOPaIUt6pUB4L9NoQS+An/C5WWIBe4CfskOWPArzZgsI35f/XY7uqzrw5fZhuO/0az/3/U9D8YhaffhkrWHVGQH21y1LWofuaXimwjKRUq8Dn28v/v/caXq+kdY7aVXeAmBvu4xxFTeVtzWP+vlukp8aWVIWAd78LQDs5SeypLypVQf+nSxpD1/JEoCf8htZ0vO8RJYA/L7fyJJWHfhs+228XmrbpyGZe88H0G7jUEzKPybsJ5PvADvq+b339bTIxsVUqzrwxYOu45hcsrXsaxjH66WIk8b37ZdLwkQJwJ6OvB4XAOcgSwCIkiUARMkSAKJkCQBRsgSAKFkCQJQsASDqJ7OkVb9dXXeAc+uYJekC8LXbal9AV9cd4AN0zJJpHIbrRiq0Fu1S1x3g5PplyTSOt81YkCUAH6pblnxNekxDe513WQLwoXplyX2993XRkHX99tb27frwtbru2X6KhYJb2wHorleWTONzcfgiMF6o5V5WwFrVh88jKjn5mYZ6+ZLWdgB20ClL0rOAJRladRKb9RPnan34shLKJQsi42YAv61PliTfEElPId7MklUKfDelv1kJywAXwN66ZEk2itSsx/5+lrxUuj2t9fvKdgB66ZIlj8mS+09DOgT1Xf32bPvcOAfJvwa5nAWl0yLpPEprOwB7iGdJ8dX1x9DS/edG/fba9lfrw9cv7nppOwB7sLYjAFGyBIAoWQJAlCwBIEqWABAlSwCIkiUARMkSAKJkCQBRHesqVpcKBuDzdVxzPl1q3rIlAH9In7Udy5ojyRr07+xu3DeJ9t4/wF/TI0tq5ave99IC8wfeP8Df0yFLtguELNMo+RLBw5QsFXwr75vOumzVgU8XBM4TolYfvr5/AIL2zZL0jCW925QsP18+vHHeUKsDn9U6SX9I652U+3NeAtDbnlnSPoo3Q6DyqOVezd9SnmdsTv7LEoDeOs2XVI/O5fYldN7Lklrt3mVoKy/n2B6+kiUAvfXIkryC7teWcep/XlLmw2281ov7yhKAH9Xn+yXTkE59p3XXl83FfMlWljx+nqbNOvDll1ouw3S/GDkfELuNQxIejf0D8LZu33uvXTc1z+m1U+kkfHldVnZe83xIcR3Xeu/JhVnDeL88bH1TeRpS7B+AIOtxARAlSwCIkiUARMkSAKJkCQBRsgSAKFkCQJQsASBKlgAQFc+S7Gvsy5fKN79Tvi5dAsB5dTkvyZdLfHnxRKssAnwGWQJAlCwBIGr3LGmtH7y647MO/HMZX0EDcA69suSSqddaX+qazJVbv+7xaqVdAI5j1/OSVcbkpybVLEnuYQwM4Bx2zZLNWrmyBOBT7H1eshUGsgTgM+w7934br8mcx70Ye+Nh85zXjc8fC8Bx7f6992rd9WIi5XnDNDzqtivHDnAex1qP65sJFgAO6UBZYpEugJM6UJYAcFKyBIAoWQJAlCwBIEqWABAlSwCIkiUARMkSAKJkCQBRsgSAKFkCQJQsASBKlgAQJUsAiJIlAETJEgCiZAkAUbIEgChZAkCULAEgSpYAECVLAIj6B7sUQB6vx6GSAAAAAElFTkSuQmCC" 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. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  2. php 文件日志类

    php文件日志类,按年月日组织目录结构. <?php class FileLog { private $_filepath; //文件路径 private $_filename; //日志文件名 ...

  3. Mybatis与Spring整合，使用了maven管理项目，作为初学者觉得不错，转载下来

    转载自:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetype ...

  4. CG_INLINE,inline 内联函数

    内联函数,即在编译的时候将函数体替换函数调用,从而不需要将parameter,return address进行push/pop stack的操作,从而加速app的运行,然而,会增加二进制文件的大小. ...

  5. zTree的内核

    zTree的内核:   *  结构       (function($){           //常量部分           //申明常量是因为这些数据是不能改变的,如果成了对象的属性,很容易就改 ...

  6. .添加索引和类型，同时设定edgengram分词和charsplit分词

    1.添加索引和类型,同时设定edgengram分词和charsplit分词 curl -XPUT 'http://127.0.0.1:9200/userindex/' -d '{   "se ...

  7. 用sublime写出的第一个网页

    STEP1 完成语义分析器 我用的vs2013 c语言写的 这个过程会在下一篇文章中详讲 准备好几个编译好的图,放在一个文件夹里,像下面这样 STEP2 规划好html的框架 上代码! (截图版) ( ...

  8. C#中异常：“The type initializer to throw an exception（类型初始值设定项引发异常）”的简单分析与解决方法

    对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...

  9. linux后台查看共享内存和消息队列的命令

    ipcs ipcs -q : 显示所有的消息队列 ipcs -qt : 显示消息队列的创建时间,发送和接收最后一条消息的时间 ipcs -qp: 显示往消息队列中放消息和从消息队列中取消息的进程ID ...

  10. sqlserver日志的备份与还原

    ----------完整备份与还原----------                --完整备份数据库--backup database studb to disk='e:\stu.bak'back ...