<!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. nodejs学习笔记一

    一.node版本的更新命令 node有一个模块叫n,是专门用来管理node.js的版本的. 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stabl ...

  2. 菜鸟笔记：javascript基础之表达式和运算符

    4.1 原始表达式 原始表达式是最简单的表达式~它不再包含其他表达式.它包含:直接量(程序中直接显示出来的数据值.)常量(程序中不会被修改的量)变量. 4.2 对象和数组的初始化表达式 对象和数组初始 ...

  3. Java图片处理 Thumbnails框架

    一.设置图片的缩放比例或者图片的质量比   第一步:导入maven的jar包 <dependency>     <groupId>net.coobird</groupId ...

  4. mysql 查询表结构

    use information_schema; select column_name, column_type, data_type, is_nullable, column_comment from ...

  5. JNDI

    这两天研究了一下 context.lookup("java:comp/env/XXX")和直接context.lookup("XXX")的区别 网上关于这两个的 ...

  6. 高可用thrift客户池的实现详解

    最近,公司要求将组内的thrift客户端组件推广至公司内使用.基本的要求如下: 1.高可用 2.集成名称服务,也就配置文件支持服务发现 3.解耦,客户端和高可用组件解耦,简单来说就是,如果以后要切换其 ...

  7. tp框架验证信息

    今天在这里我们学习一下tp框架里面怎么做验证. 验证又分为两种:静态验证.动态验证 首先,我们还是先做一个html界面,名为add.html.代码如下: <!DOCTYPE html PUBLI ...

  8. No plugin found for prefix 'mybatis-generator' in the current project

    http://blog.csdn.net/you23hai45/article/details/50792430 1.错误描述 F:\workspaces\Mybatis>mvn mybatis ...

  9. Linux定时任务

    定时任务:1.目录/var/spool/cron2:查看当前用户的定时任务[oracle@localhost ~]$ crontab -l* * * * * /home/oracle/test.sh ...

  10. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...