<!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. HDU - 5096 ACM Rank （Treap）

    平衡树的题,Treap破之,比较难搞的出现相同题数罚时的情况,解决方法是在每个结点用一个set, 保证结点值的时候可以把题数和罚时保存到一个int里,令v = n*MaxPenaltySum-pena ...

  2. 在CNN中使用Tensorflow进行数据增强

    开始之前,需要思考一些基本问题 1.为什么需要大量数据 当您训练机器学习模型时,您真正在做的是调整其参数,以便它可以将特定输入(例如,图像)映射到某个输出(标签).我们的优化目标是追逐我们模型损失较低 ...

  3. FreeRTOS笔记

    任务的创建和删除(静态方法) 任务创建后要开启调度器. FreeRTOSConfig.h 1. 改宏 使能静态创建函数. 会出现,有两个函数未定义. Cortex-M中断管理(上) NVIC:嵌套向量 ...

  4. hadoop相关资料集锦

    1 Hadoop集群系列集锦http://www.cnblogs.com/xia520pi/archive/2012/04/08/2437875.html 2 Hadoop和MapReduce详解ht ...

  5. no pointer in java

    Why there are no pointers in Java? In Java there are references instead of pointers. These reference ...

  6. QT5:第一章 初始化

    一.简介 二.新建项目 在项目Application中: QT Widgets Application(桌面QT应用) QT Console Application(控制台QT应用) QT for P ...

  7. C#数组排序方法

    在C#中常用的数组排序的方法有:选择排序法.冒泡排序法.插入排序法和希尔排序法等. 一.选择排序法 using System;using System.Collections.Generic;usin ...

  8. ubuntu14.04搭建LAMP环境(nginx,php,mysql,linux)详解

    最近更换开发环境至ubuntu,整理开发环境和常用软件的安装配置(更新排版) 以下安装过程经过多次操作得出,参照步骤进行操作即可 一.LAMP基本环境搭建 1 切换root账号 sudo su 2,安 ...

  9. c# 输出不同时间的格式

    C#时间/日期格式大全,C#时间/日期函数大全 有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2005-6-6 14:33:34 如果要换成成200506,06-2005,2005-6- ...

  10. python输出mssql 查询结果示例

    # -*- coding: utf-8 -*-# python 3.6import pymssql conn=pymssql.connect(host='*****',user='******',pa ...