<!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#中静态成员和实例变量

    昨天晚上看静态成员和实例变量的时候,看到这样的一句话:默认情况下,若成员被定义为实例变量,这就意味着类需要为每个实例都建立一个副本,而在定义一个静态变量的时候,只存在此成员的一个副本. 呵呵,今天跟前 ...

  2. jsp四大作用域之Session

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  3. userBean-作用范围session

    package com.java1234.model; public class Student { private String name;private int age; public Strin ...

  4. codeforce Gym 100500A Poetry Challenge（博弈，暴搜）

    题解:状态压缩之后,暴力dfs,如果有一个选择,能让对手必败,那么就是必胜态,能转移到的状态都是对手的必胜态,或者无法转移,就是必败态. 总算是过了,TLE是因为状态没判重. #include< ...

  5. 使用EventLog组件保存Windows系统日志

    实现效果: 知识运用: EventLog类的CreateEventSource方法 //用于建立一个应用程序  使用指定的Sourc作为向本机上的日志中写入日志项的有效事件源 CreateEventS ...

  6. 将数据表中的数据添加到ComboBox控件中

    实现效果: 知识运用: ComboBox控件的DataSource 属性 //获取或设置ComboBox的数据源 public Object DataResouce{get;set;} //属性值:任 ...

  7. CAD控件的鼠标事件（网页版）

    _DMxDrawXEvents::MouseEvent CAD控件中的鼠标事件. 参数 说明 LONG lType 事件类型,1鼠标移动,2是鼠标左键按下,3是鼠标右键按下,4是鼠标左键双击 5是鼠标 ...

  8. k8s1.13.0二进制部署-flannel网络（二）

    Flannel容器集群网络部署 Overlay Network:覆盖网络,在基础网络上叠加的一种虚拟网络技术模式,该网络中的主机通过虚拟链路连接起来.VXLAN:将源数据包封装到UDP中,并使用基础网 ...

  9. retain, copy, assign以及autorelease

    一,retain, copy, assign区别 1. 假设你用malloc分配了一块内存,并且把它的地址赋值给了指针a,后来你希望指针b也共享这块内存,于是你又把a赋值给(assign)了b.此时a ...

  10. Android读书笔记四

    第四章 这是一次源代码之旅,学到了如何下载和编译Android源代码和Linux内核源代码.来详细阐述一下一些具体过程 一.Android源代码下载环境 1.安装下载Android源代码的环境配置 ( ...