首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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实现控制的多级下拉菜单

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

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

- Author -

hebedich

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

Javascript 相关文章推荐
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
js获取class的所有元素
Mar 28 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Vue和React有哪些区别
Sep 12 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
.NET Framework(2) DBLink(1) DNS服务器(2) 事务并发(1) 磁盘分区(1) GZIP(2) FTP服务器(1) 复读(1) IIS7(1) 界面设计(1)
You might like
PHP文件上传主要代码讲解
2013/09/30 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
CI框架常用方法小结
2016/05/17 PHP
优化javascript的执行速度
2010/01/23 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python中的协程深入理解
2019/06/10 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python判断是空的实例分享
2020/07/06 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
软件缺陷的分类都有哪些
2014/08/22 面试题
JPA的优势都有哪些
2013/07/04 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
党的群众路线教育实践活动对照检查材料（四风）
2014/09/27 职场文书
小学生交通安全寄语
2015/02/27 职场文书
董事长年会致辞
2015/07/29 职场文书
新学期感想
2015/08/10 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python