<!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. hdu 4481 Time travel(高斯求期望)(转)

    (转)http://blog.csdn.net/u013081425/article/details/39240021 http://acm.hdu.edu.cn/showproblem.php?pi ...

  2. Orchard 模块开发学习笔记 （1）

    创建模块 首先,打开Bin目录下的Orchard.exe 等到出现orchard>后, 看看命令列表中是否存在 codegen module 如果不存在,则需要先执行:feature enabl ...

  3. Android中矢量动画

    Android中矢量动画 Android中用<path> 标签来创建SVG,就好比控制着一支画笔,从一点到一点,动一条线. <path> 标签 支持一下属性 M = (Mx, ...

  4. Android手机刷recovery

    以前觉得android刷机是件很麻烦的事,现在倒不觉得了.  只要手机刷入第三方的recovery,一切都好办了,无论是root还是刷google play.  recovery开源的有两大阵营,tw ...

  5. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

  6. 第20讲 HOOK和数据库编程

    1,安装钩子过程可以通过SetWindowsHookEx函数来完成 2,得到当前线程ID,可以用GetCurrentThreadId 3,移除钩子可以用UnhookWindowsHookEx函数 4, ...

  7. javaWeb项目中如何实现在线查看pdf文件

    最近有需求要实现在网页直接查看pdf,word,excel文件.但是实际当中并没有很好的开源插件供我们使用,确实有一些付费的插件不错,也很好用,但是对于我来说都不适合. 现在只是单纯的找到了围魏救赵的 ...

  8. eclipse开发servlet，HttpServletRequest报红叉解决方案

    eclipse开发servlet,HttpServletRequest报红叉解决方案 今天突然间有兴致,想打一会代码,于是开发一个Servlet,代码和配置路径都没问题,HttpServlet居然报错 ...

  9. Yii 1开发日记 -- Ajax实现点击加载下一页

    功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...

  10. 泛型T的类型获取

    T.getClass()或者T.class都是非法的,因为T是泛型变量. 由于一个类的类型是什么是在编译期处理的,故不能在运行时直接在Base里得到T的实际类型. /** * 可以在service层直 ...