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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
基于原生js实现判断元素是否有指定class名
Jul 11 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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php内嵌函数用法实例
2015/03/20 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
简述JS控制台的使用
2018/07/15 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
责任书格式
2015/01/29 职场文书
南京导游词
2015/02/03 职场文书
感谢信
2019/04/11 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
我的收音机情缘
2022/04/05 无线电