<!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. Android商城开发系列（三）——使用Fragment+RadioButton实现商城底部导航栏

    在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示:   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...

  2. userBean之设置属性

    package com.java.model; public class Student { private String name;private int age; public String ge ...

  3. 从照片网站pexels批量爬取照片

    调试中,未成功. from bs4 import BeautifulSoup import requests headers={ #'User-Agent':'Nokia6600/1.0 (3.42. ...

  4. 数据分析R&Python-Rpy2包环境配置

    Rpy2环境配置 最近想将R整合到以flask为后端框架的web系统中,在服务器端做数据统计分析.需要将R语言整合到Python中,发现Python中的Rpy2可以调用R语言,所以花了一些时间配置了一 ...

  5. vue跨域处理（vue项目中baseUrl设置问题）

    1.开发环境: 2.生产环境: 然后 const instance = axios.create({ baseURL: process.env.API })

  6. C++调用C语言编译的so文件

    参考链接:https://blog.csdn.net/chenjinlong126/article/details/78990350 一.制作so文件:libadd_c.so或libadd_cpp.s ...

  7. java中的同步与异步

    在多线程的环境中,经常会碰到数据的共享问题,即当多个线程需要访问同一个资源时,它们需要以某种顺序来确保该资源在某--时刻只能被-一个线程使用,否则,程序的运行结果将会是不可预料的,在这种情况下就必须对 ...

  8. DC课程目标

  9. MySQL中 IFNULL、NULLIF和ISNULL函数的用法

    mysql 中 ifnull().nullif().isnull()函数的用法讲解: 一.IFNULL(expr1,expr2)用法: 假如expr1不为NULL,则 IFNULL() 的返回值为ex ...

  10. GoF23种设计模式之行为型模式之备忘录模式

    一.概述         在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象的外部保存这个状态.以便以后可以将该对象恢复到原先保存的状态. 二.适用性 1.当需要保存一个对象在某个时刻的状态( ...