js实现下拉菜单

<!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实现下拉菜单的更多相关文章

纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js版本下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
js模拟下拉菜单-键盘、鼠标（代码详解）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bootstrap和JS实现下拉菜单
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...
js二级下拉菜单
看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...
AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
原生js实现下拉菜单
简单给两段代码: html和css部分: <style> .one li{ width:100px; height:30px; line-height:30px; background:u ...

随机推荐

centos7 编译php56
编译安装php5.6 centos7环境步骤: //下载php5.6 wget http://cn2.php.net/distributions/php-5.6.26.tar.bz2 //安装依赖 ...
excel to datatable (c#用NPOI将excel文件内容读取到datatable数据表中)
将excel文件内容读取到datatable数据表中,支持97-2003和2007两种版本的excel 1.第一种是根据excel文件路径读取excel并返回datatable /// <sum ...
javascript 心得
1.&&和||等逻辑判断运算标记可以当成条件运算来使用例如: var a = b = c = "12"; (a=="13"&& ...
word20161224
V.34 V.90 validation / 验证 value entry / 值项 variable / 变量 variable bit rate, VBR / 可变传输率 VBR, variabl ...
oracle 学习笔记(三)
1. SQL(基础查询) 1.1. 基本查询语句 1.1.1. FROM子句 SQL查询语句的语法如下: SELECT <*, column [alias], -> FROM tabl ...
bootstrap validate 实现页面动态验证（formvalidate）
关于基本的bootstrap validate 验证方法外面有许多博客上都有讲解,我就不在过多叙述了.大家也可以去看官网api:http://bv.doc.javake.cn/api/ 今天要说的是动 ...
python class metaclass instance
>>> class CObj(object):... pass...>>> dir()['CObj', '__builtins__', '__doc__', '__ ...
set和map的简单用法
.set(集合)map(映射)都属于关联类容器都支持查询一个元素是否存在并能够有效地获取元素. set集合的元素总是从小到大排列,set集合通过二分查找树实现.它具备以下两个特点: ①:独一无二的元 ...
axure rp8.0 序列号，亲测可以用
转载自:https://zhidao.baidu.com/question/428326076480233092.html aaa 2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3 ...
history命令详解
Linux下history命令用法 ^_^在项目中希望调用history命令来获取用户的历史记录,方便分析,可是我们平时所见到的history结果是下面这样: # history | head -10 ...

js实现下拉菜单

js实现下拉菜单的更多相关文章

随机推荐

热门专题