<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

    body,ul{margin:0;padding:0;}

    li{width:100px;height:30px;line-height:30px;float:left;border:1px solid #000;text-align:center;background:#00FFFF;list-style:none;position:relative;}

    li div{position:absolute;top:30px;left:0;filter:alpha(opacity=0);opacity:0;width:100%;    height:0;overflow:hidden;}

    /*这里的height:必须要写，overflow:也必须要写，不然没有下拉的效果*/

</style>

<script src="perfectStartMove.js"></script>

<script>

    window.onload = function(){

        var arrLi = document.getElementsByTagName('li');

        for(var i=0;i<arrLi.length;i++){

            arrLi[i].onmouseover = function(){

                var oDiv =     this.getElementsByTagName('div')[0];

                oDiv.style.height = 'auto';

                var heightVlaue = oDiv.offsetHeight;

                oDiv.style.height = 0;

                perfectStartMove(oDiv,{height:heightVlaue,opacity:100});

            };

            arrLi[i].onmouseout = function(){

                var oDiv =     this.getElementsByTagName('div')[0];

                perfectStartMove(oDiv,{height:0,opacity:0});

            };

        }

    };

</script>

</head>

<body>

    <ul>

        <li>

            首页

            <div>

                第三十<br />

                esfsdfds <br />

                dfdfd <br />

                fd

            </div>

        </li>

        <li>

            产品

            <div>

                fcd<br />

                esfsdfds <br />

                dfdfd

            </div>

        </li>

        <li>

            联系我们

            <div>

                读书三<br />

                ttt <br />

                dfdfd <br />

                fd

            </div>

        </li>

    </ul>

</body>

</html>

js 实现简单的导航下拉列表的更多相关文章

  1. react-native 简单的导航

    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...

  2. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  3. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. require.js 模块化简单理解

    组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...

  5. 基于node+koa2+mongodb实现简单的导航管理系统

    基于node+koa2+mongodb实现简单的导航管理系统 项目说明 本项目gitbub地址 https://github.com/xuess/nav-admin,喜欢请star 基于node 实现 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  8. js实现无限级树形导航列表

  9. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. jmeter如何解决乱码问题

    使用jmeter的时候时常遇到中文乱码的情况,下面总结一下几个解决方法,方便以后进行复习. 1.添加后置处理器Beanshell PostProcessor,在输入框内写入“prve.setDateE ...

  2. python3多进程爬虫（第二卷）

    上卷中讲到,我有4个进程,可是我要同时爬取20+数据怎么办,很明显上卷的语法公式不可以,所以现在我引入线程池 现在看一下线程池的语法 看一下爬虫: 注意圈中重点

  3. springdatajpa 认识以及使用方式

    1.spingdatajpa是什么? Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套JPA应用框架(即上述的:JPA的实现产品),可使开发者用极简 ...

  4. Json格式化的实现（Jackson、Gson）

    一.第一种(Jackson) 需要用到的jar包: https://pan.baidu.com/s/1wrkUwEoKpmqgmYPQSN-iZg package util; import com.f ...

  5. 良知VS野心，苹果为何要翻新手机？

    前不久,苹果在大中华区推出了iPhone和iPad换机服务,消息一经发出便引发了果粉们的狂欢,那些丢弃在抽屉里的iPhone4S们看上去终于有着落了,也更坚定了"我是果粉,我骄傲" ...

  6. QQbug--QQ截图不显示保存类型

    QQ软件bug--QQ截图不显示保存类型,设置显示后缀名也没用 问题:     QQ截图截后,不通过对话框直接保存时,不显示保存类型,文件名下面的类型的框框是一片空白,在文件夹选项设置显示后缀名也没用 ...

  7. python标准库：datetime模块

    原文地址:http://www.bugingcode.com/blog/python_datetime.html datatime 模块题共用一些处理日期,时间和时间间隔的函数.这个模块使用面向对象的 ...

  8. Spring学习笔记（七）模拟实际开发过程的调用过程XML版-Setter方式注入

    模拟实际开发过程的调用过程XML版-Setter方式注入 源码获取github [TOC] 1.项目结构 2.jar包跟上个一样 3.重写set方法 UserServiceImpl.java 1234 ...

  9. 使用apache mail发送邮件错误解决办法

    今天在写发送邮件的程序时发现了以下两个些错误,贴出来跟大家分享分享 希望对大家有帮助. 错误一: Exception in thread "main" java.lang.NoCl ...

  10. Seeing AI：计算机视觉十年磨一剑，打造盲人的“瑞士军刀”

    Mary Bellard(左)和AnneTaylor(右)是Seeing AI开发团队的成员,SeeingAI成果的背后是计算机视觉数十年研究的支持. 当Anne Taylor走进一个房间时,她像其 ...