<!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. Android——SharedPreferences

    SharedPreferences是一种轻型的Android数据存储方式,用来保存应用的一些常用配置. 实现SharedPreferences存储的步骤如下: 1.根据Context获取SharedP ...

  2. CAIN怎么嗅探路由密码

    Cain & Abel 是由Oxid.it开发的一个针对Microsoft操作系统的免费口令恢复工具.号称穷人使用的L0phtcrack.它的功能十分强大,可以网络嗅探,网络欺骗,破解加密口令 ...

  3. select2 demo

    https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的opti ...

  4. 关于python的10个建议,比较适合新手吧.

    关于python的十个建议 http://safehammad.com/downloads/python-idioms-2014-01-16.pdf

  5. CPrimerPlus第11章第10题

    题目: 编写一个程序,读取输入,直到读入了10个字符串或遇到EOF,由二者中最先被满足的那个终止读取过程.这个程序可以为用户提供一个有5个选项的菜单:输出初始字符串列表.按ASCII顺序输出字符串.按 ...

  6. 安全的将excel导入sqlite3的解决方案

    最近在做一个小项目时,需要把一个excel中的数据保存到sqlite3数据库中以备后用,表中有字符也有数字,要用到特定的数据类型方便后续使用,参照网上的方法,将excel文件转换为csv文件后,在导入 ...

  7. MVC Code First 当实体类发生变化时，如何自动更新数据库表

    下面做一个例子,Category是用户新建的一个实体类,然后添加一个字段,然后让数据库中的Category表也添加一个字段 1.Category.cs

  8. heightcharts

    title:标题 subtitle:子标题 data:eval(dataList)//数据格式转换

  9. 多个html怎么导入相同的头部导航

    1. iframe 包含法.页头和页尾分别做成一个页面,然后通过iframe嵌入到调用的页面.这种方法在页头页尾高度固定的时候比较适用,因为当页头页尾高度不固定时,需要iframe根据页面内容自适应高 ...

  10. 104-switch语句读法：