<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js版本下拉菜单</title>

<style>

*{ margin:0; padding:0; list-style:none;}

a{ text-decoration:none; color:#000;}

#top{ margin:0 auto; width:980px;}

.top-nav{ height:40px;}

.top-nav li{ float:left;width:200px; line-height:40px; background:#E5383B;}

.top-nav li a{ display:block; text-align:center;  color:#fff;}

.top-nav li a:hover{ background:#FC6D70; color:#F0F0F0;}

.top-nav li .se-nav{ display:none;}

.top-nav li .se-nav li{ height:45px; line-height:45px;}

</style>

<script type="text/javascript">

window.onload=function(){

	var oTop=document.getElementById('top');

	var oTopNav=document.getElementById('topNav');

	var aLi=document.getElementsByTagName('li');

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

		aLi[i].onmouseover=function(){

			var seNav=this.getElementsByTagName('ul')[0]

			if(seNav!=undefined){

				seNav.style.display='block';

				}

			}

		aLi[i].onmouseout=function(){

			var seNav=this.getElementsByTagName('ul')[0]

			if(seNav!=undefined){

				seNav.style.display='none';

				}

			}

		}

}

</script>

</head>

<body>

<div id="top">

    <ul class="top-nav" id="topNav">

        <li><a href="#">首页</a></li>

        <li>

        	<a href="#">课程大厅</a>

            <ul class="se-nav">

            	<li><a href="#">javascript</a></li>

                <li><a href="#">css</a></li>

                <li><a href="#">jquery</a></li>

            </ul>

        </li>

        <li><a href="#">学习中心</a></li>

        <li>

        	<a href="#">关于我们</a>

            <ul class="se-nav">

            	<li><a href="#">javascript</a></li>

                <li><a href="#">css</a></li>

                <li><a href="#">jquery</a></li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>

　　

js版本下拉菜单的更多相关文章

  1. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  4. js模拟下拉菜单-键盘、鼠标（代码详解）

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

  5. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  6. js实现下拉菜单

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

  7. js二级下拉菜单

    看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...

  8. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  9. 原生js实现下拉菜单

    简单给两段代码: html和css部分: <style> .one li{ width:100px; height:30px; line-height:30px; background:u ...

随机推荐

  1. C# 简单创建和删除文件夹

    文章转自http://www.cnblogs.com/pegasus923/archive/2011/01/26/1944838.html C#中对文件夹操作需要用到Directory Class.其 ...

  2. basic ,fundamental ,extreme ,utmost和radical.区别

    basic 普通用词,指明确.具体的基础或起点.fundamental 书面用词,不如basic使用广泛,侧重指作为基础.根本的抽象的事物.radical 着重指事物的根本或其来源.下面是extrem ...

  3. NVM for Windows下载与安装

    下载NVM for Windows https://github.com/coreybutler/nvm-windows/releases nvm-noinstall.zip: 这个是绿色免安装版本, ...

  4. 如何在SAP云平台的Cloud Foundry环境下添加新的Service(服务)

    我想在SAP云平台的Cloud Foundry环境下使用MongoDB的服务,但是我在Service Marketplace上找不到这个服务. cf marketplace返回的结果也没有. 解决方案 ...

  5. cdoj 414 八数码 （双向bfs+康拓展开，A*）

    一道关乎人生完整的问题. DBFS的优越:避免了结点膨胀太多. 假设一个状态结点可以扩展m个子结点,为了简单起见,假设每个结点的扩展都是相互独立的. 分析:起始状态结点数为1,每加深一层,结点数An ...

  6. GIT分布式版本控制器的前后今生

    Git的入门与安装 GIT基础操作 GIT的分支应用 GITLAB应用 gitlab与pycharm应用 GITHUB使用

  7. 在axios中使用async await

    最近在做树鱼的项目, 联想到 如果用 async await 怎么处理, export async function Test1() { return new Promise((resolve) =& ...

  8. PAT (Basic Level) Practise （中文）- 1018. 锤子剪刀布 (20)

    http://www.patest.cn/contests/pat-b-practise/1018 大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统 ...

  9. setTimeout,clearTimeout的一些好用法

    if(hidden != 1){ $.ui.showMask(); var _aaa = setTimeout(function(){ $.ui.hideMask(); },5000); } //be ...

  10. 利用ss5服务搭建代理服务器

    利用ss5服务搭建代理服务器 1. 下载ss5-3.8.9-8.tar.gz ###官网下载http://ss5.sourceforge.net/ 2. 安装ss5 yum -y install gc ...