首页
所有分类
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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）
Feb 14 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
viewer.js实现图片预览功能
Jun 24 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
内存池(1) queue(1) 云服务器(1) Foreign Key(1) TaiShan(1) 数据备份(2) 外键约束(1) expdp(1) 腾讯云(1) JDK(1)
You might like
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
js实现百度地图定位于地址逆解析，显示自己当前的地理位置
2016/12/08 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Django中url的反向查询的方法
2018/03/14 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
iPython pylab模式启动方式
2020/04/24 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Pycharm Git 设置方法
2020/09/15 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
商品陈列协议书
2014/09/29 职场文书
班组长如何制订适合本班组的工作计划？
2019/07/10 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python