<!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# 使用解析json 嵌套方法

    C#从网页不传参数 接收json数据 public String GetHtmlFromUrl(String url) { //Response.Write(url); //Response.End( ...

  2. Windows7(x86) xampp php5.5 imagick install

    I hate windows. 1. 下载安装 ImageMagick, 选择合适您电脑的版本,我下载的是: ImageMagick-6.8.9-1-Q16-x86-dll.exe http://ww ...

  3. sublime text 3的使用过程记录

    1.使用cmd命令行: 首先配置环境变量(即将sublime text3.exe所在目录放在path路径).完成之后,既可以利用subl命令行 subl file :: 使用Sublime Text打 ...

  4. 安装指定版本的minikube

    Minikube是什么? Kubernetes集群的安装和部署对于很多初学者来说是一道坎.为了方便大家开发和体验Kubernetes,Kubernetes开源社区提供了可以在本地部署的Minikube ...

  5. Ecshop首页购物车数量调取问题

    在page_header.lbi中调用SQL: <?php $sql = 'SELECT SUM(goods_number) AS number' . ' FROM ' . $GLOBALS[' ...

  6. HTML_4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. QT+event（） + 事件过滤器

    其存在的意义: mywidget.h: #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> namespace Ui { cl ...

  8. IOS7的变化

    API变化: 1.弃用 MKOverlayView 及其子类,使用类 MKOverlayRenderer: 2.弃用 Audio Toolbox framework 中的 AudioSession A ...

  9. JavaScript中数组的使用

    ---恢复内容开始--- 创建数组 1,通过 var arr1 = [1,2,3] 2通过使用 var arr2 = new Array(1,2,3) 在这里创造的数组实际上都是一个对象,然后把对象的 ...

  10. HDU-1072-Nightmares

    这题可以用dfs写,我们记忆化搜索. 我们定义一个step和time数组,分别表示走到这点的最小步数,time表示走到该点炸弹还剩多少时间. 递归边界一是,如果走到该点,时间等于0,我们就返回. 如果 ...