<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
      *{
         margin: 0px;
         padding: 0px;
      }
      ul{
         list-style-type: none;
      }
      #nav{
         height: 40px;
         background-color: #eee;
         margin: 0 auto;
      }
      a{
         width: 80px;
         /*padding: 0 10px;*/
         text-decoration: none;
         color: #000;
         display: block;
         line-height: 40px;
         text-align: center;
      }
      ul li{
         float: left;   
         position: relative;
      }
      ul li ul{
         position: absolute;
         left: 0px;
         top:40px;
         display: none;
      }
      ul li ul li{
         float: none;
         background-color: #eee;
         margin-top: 2px;
      }
      a:hover{
         color: #fff;
         background-color: #666;
      }
      ul li ul li{
         width: 80px;
      }
      /*#nav li a span{
         display: none;
      }
      #nav li a:hover span{
         display: block;
      }
      #nav li a:hover{
         margin-top: -40px;
      }*/
   </style>
   <script type="text/javascript">
      window.onload = function(){
         var iLi = document.getElementsByClassName("intro");
         // console.log(iLi);
         for(var i=0;i < iLi.length;i++){   
            iLi[i].onmouseover = function(){
               // 找到相应的子菜单只需要在相应的下面父级菜单下面获取元素
               var iUl = this.getElementsByTagName("ul")[0];
               iUl.style.display = "block";
            }
            iLi[i].onmouseout = function(){
               var iUl = this.getElementsByTagName("ul")[0];
               iUl.style.display = "none";
            }
         }
      }
   </script>
</head>
<body>
   <div >
      <ul id="nav">
         <li class="intro"><a href="#">首页<span>Home</span></a></li>
         <li class="intro"><a href="#">课程大厅<span>Course</span></a>
            <!-- 添加二级菜单 -->
            <ul>
               <li><a href="#">C语言</a></li>
               <li><a href="#">Java</a></li>
               <li><a href="#">HTML</a></li>
               <li><a href="#">CSS</a></li>
            </ul>
         </li>
         <li class="intro"><a href="#">学习中心<span>Learn</span></a>
            <ul>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
               <li><a href="#">3</a></li>
               <li><a href="#">4</a></li>
            </ul>
         </li>
         <li class="intro"><a href="#">经典案例<span>Case</span></a>
            <ul>
               <li><a href="#">5</a></li>
               <li><a href="#">6</a></li>
               <li><a href="#">7</a></li>
               <li><a href="#">8</a></li>
            </ul>
         </li>
         <li class="intro"><a href="#">关于我们<span>About</span></a>
            <ul>
               <li><a href="#">C语言</a></li>
               <li><a href="#">Java</a></li>
               <li><a href="#">HTML</a></li>
               <li><a href="#">CSS</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="utf-8"> <title> ...

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

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

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

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

  6. bootstrap和JS实现下拉菜单

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

  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. svn 版本迁移到 git 仓库

    1.拉取 svn代码并转成 git 版本 git svn fetch http://svn.qtz.com/svn/qtz_code/java/qtz_sm/project/qtz_sm -Auser ...

  2. Archlinux安装MySQL5.7.14压缩包版

    现在Arch官方源里是MariaDB,MySQL扔到AUR里去了...感觉还是自己安装好些... (参考资料:度娘.官方文档) 贴配置: lts版的 在Vbox虚拟机测试 按照官方文档的安装步骤: 创 ...

  3. 如何将Sphinx生成的html文档集成进入Django

    参考 http://stackoverflow.com/questions/10594618/django-and-sphinx-how-to-view-the-html-sphinx-generat ...

  4. 终于遇到app不兼容，你遇到了么？

    题记: 如果支付宝和QQ不兼容,要二选一,你会怎么选择? 首先了解一下背景: 笔者最近发现,微众银行的app升级到1.7.4, 而患有轻度强迫症的人是迫不及待的点了升级. 第一次,居然安装包安装不成功 ...

  5. java dom4j封装和解析XML

    package org.scbit.lsbi.scp.utils; import java.util.ArrayList; import java.util.List; import org.dom4 ...

  6. code vs 1098 均分纸牌(贪心)

    1098 均分纸牌 2002年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解   题目描述 Description 有 N 堆纸牌 ...

  7. Touch ID 实现

    Touch ID 1.要求 机型:iPhone 5s以上 系统:iOS8以上 框架:#import <LocalAuthentication/LocalAuthentication.h> ...

  8. Linux kilin 安装和按键服务器步骤

    U盘启动,傻瓜式安装 设置root 密码 sudo passwd root vsftpd和ssh服务 使用apt-get可以直接安装vsftpd和ssh,首先要sudo apt-get update ...

  9. WebSocket介绍和一个简单的聊天室

    WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...

  10. Ubuntu 16.04 安装ftp服务器

    1.sudo apt-get update 2.sudo apt-get install vsftpd ,执行完该步骤,vsftpd服务已经安装 3.创建ftp用户 a,创建用户目录 sudo mkd ...