编程 Javascript

javascript实现控制的多级下拉菜单

Posted in Javascript onJuly 05, 2015

最近身体不适，所以没能如期的更新，抱歉。这里直接把代码贴上，如果有不明白的地方，留言就行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <title>下拉菜单</title>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
      .navi ul {
        padding: 0;
        list-style-type: none;
      }
      .navi ul li {
        text-align: center;
        float: left;
        position: relative;
        width: 200px;
        background-color: #0F8CFF;
      }
      a {
        color: #086808;
        text-decoration: none;
      }
      .navi ul li a {
        display: block;
        border: 1px solid #fff;
      }
      .navi ul li ul {
        display: none;
        left: 0;
      }
      .navi ul li ul li ul{
        position: absolute;
        left:200px;
        top: 0;
      }
      .navi ul li:hover ul a {
        color: yellow;
      }
    </style>
 
    <script type="text/javascript">
      function showNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "block";
      }
      function hideNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "none";
      }
    </script>
  </head>
 
  <body>
 
    <div class="navi">
      <ul >
        <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
              <a href="javascript:;" >传奇</a>
 
              <ul>
                <li>
                  <a href="javascript:;" >1</a>
                </li>
                <li>
                  <a href="javascript:;" >2</a>
                </li>
                <li>
                  <a href="javascript:;" >3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
 
  </body>
 
</html>

效果图如下：　

以上所述就是本文的全部内容了，希望大家能够喜欢。

javascript实现控制的多级下拉菜单

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 指南/入门基础

Nov 30 Javascript

js调试工具console.log()方法查看js代码的执行情况

Aug 08 Javascript

js使用setTimeout实现定时炸弹的方法

Apr 10 Javascript

浅谈JS继承_借用构造函数 & 组合式继承

Aug 16 Javascript

JS html时钟制作代码分享

Mar 03 Javascript

JQuery实现定时刷新功能代码

May 09 jQuery

angularJS利用ng-repeat遍历二维数组的实例代码

Jun 03 Javascript

js 发布订阅模式的实例讲解

Sep 10 Javascript

详解Vue内部怎样处理props选项的多种写法

Nov 06 Javascript

详解webpack引入第三方库的方式以及注意事项

Jan 15 Javascript

VUE:vuex 用户登录信息的数据写入与获取方式

Nov 11 Javascript

JavaScript实现滑块验证解锁

Jan 07 Javascript

javascript遇到html5的一些表单属性

Jul 05 #Javascript

浅谈angularJS 作用域

Jul 05 #Javascript

javascript 应用小技巧方法汇总

Jul 05 #Javascript

javascript常用功能汇总

Jul 05 #Javascript

最新最热最实用的15个jQuery插件汇总

Jul 05 #Javascript

JavaScript返回上一页的三种方法及区别介绍

Jul 04 #Javascript

javascript实现点击提交按钮后显示loading的方法

Jul 03 #Javascript

You might like

php一些错误处理的方法与技巧总结

2013/08/10 PHP

php使用gzip压缩传输js和css文件的方法

2015/07/29 PHP

PHP的PDO大对象(LOBs)

2019/01/27 PHP

弹出广告特效代码(一个IP只弹出一次)

2007/05/11 Javascript

iframe的onreadystatechange事件在firefox下的使用

2014/04/16 Javascript

JavaScript检查某个function是否是原生代码的方法

2014/08/20 Javascript

jQuery实现跟随鼠标运动图层效果的方法

2015/02/02 Javascript

javascript连续赋值问题

2015/07/08 Javascript

Javascript的表单验证-初识正则表达式

2016/03/18 Javascript

JS字符串长度判断,超出进行自动截取的实例(支持中文)

2017/03/06 Javascript

node.js中grunt和gulp的区别详解

2017/07/17 Javascript

深入理解Vue transition源码分析

2017/07/30 Javascript

JS实现百度搜索接口及链接功能实例代码

2018/02/02 Javascript

react中Suspense的使用详解

2019/09/01 Javascript

javascript如何实现create方法

2019/11/04 Javascript

详解JavaScript中精度失准问题及解决方法

2020/02/04 Javascript

ng-alain的sf如何自定义部件的流程

2020/06/12 Javascript

vue 页面回退mounted函数不执行的解决方案

2020/07/26 Javascript

从0到1学习JavaScript编写贪吃蛇游戏

2020/07/28 Javascript

Python使用百度API上传文件到百度网盘代码分享

2014/11/08 Python

python模块之sys模块和序列化模块(实例讲解)

2017/09/13 Python

使用Python操作excel文件的实例代码

2017/10/15 Python

PyTorch的深度学习入门之PyTorch安装和配置

2019/06/27 Python

Python算法的时间复杂度和空间复杂度(实例解析)

2019/11/19 Python

Python常用编译器原理及特点解析

2020/03/23 Python

全球销量第一生发产品：Viviscal

2017/12/21 全球购物

德国婴儿服装和婴儿用品购买网站：Baby Sweets

2019/12/08 全球购物

某IT外企面试题-二分法求方程！看看大家的C++功底

2015/07/04 面试题

会计电算化个人自我评价

2013/11/17 职场文书

行政人员岗位职责

2013/12/08 职场文书

超市开店计划书

2014/04/26 职场文书

审计局班子四风对照检查材料思想汇报

2014/10/07 职场文书

优秀班集体事迹材料

2014/12/25 职场文书

维稳工作承诺书

2015/01/20 职场文书

交警失职检讨书

2015/01/26 职场文书

欠款纠纷起诉状

2015/05/19 职场文书