demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实现下拉菜单效果</title>

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

<div id="nav">

    <ul>

        <li><a href="#">首页</a></li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>

            <ul>

                <li><a href="#">JavaScript</a></li>

                <li><a href="#">Html/CSS</a></li>

            </ul>

        </li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>

            <ul>

                <li><a href="#">视频学习</a></li>

                <li><a href="#">实例练习</a></li>

                <li><a href="#">问与答</a></li>

            </ul>

        </li>

        <li><a href="#">经典案例</a></li>

        <li><a href="#">关于我们</a></li>

    </ul>

</div>

</body>

</html>

　　demo.js

function displaySubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "block";

}

function hideSubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "none";

}

　　demo.css

*{ margin:0px; padding:0px;}

body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}

#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}

ul{ list-style:none;}

ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}

a:hover{ color:#F00; background-color:#666;}

ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}

　　效果：

2017-09-0 6   2017-09-06   

javascript实现下拉菜单的显示与隐藏的更多相关文章

  1. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  2. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  3. javascript 横向下拉菜单演示

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...

  4. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  5. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  6. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  7. Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)

    详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  8. javascript简易下拉菜单效果

    JS代码: window.onload=function(){ var oDiv=document.getElementById('navMenu'); var aUl=oDiv.getElement ...

  9. layui 单选框、复选框、下拉菜单 不显示问题 记录

    1. 如果是 ajax嵌套了 页面, 请确保  只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...

随机推荐

  1. C++创建对象时什么时候用*,什么时候不用*

    用*, 表示创建的是一个指针对象,而指针的创建,必须初始化,C++中用new关键字开辟内存. 另外指针对象访问成员变量用-> , 非指针用. 就这么个原则 但是指针也可以不用-> 例如 ( ...

  2. 学习如何使用Markdown

    Markdown 新手指南点击查看 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ---段落 引用 这是一个无序列表 这是一个无序列表 这是一个父无序列表 这是一个子无序列表 这是一个有 ...

  3. Android 一键分享功能简单实现

    import java.io.File;import java.util.ArrayList;import java.util.List; import android.content.Context ...

  4. 修改oracle数据库字段类型，处理ORA-01439错误

    修改表PTLOG的列TYPE的char(1)为varchar(2)类型? 在PTLOG 表新增一列 TYPE_2:ALTER TABLE PTLOG ADD TYPE_2 VARCHAR2(2) de ...

  5. spss如何选择需要的变量？

    spss如何选择需要的变量? 今天一位网友问我,spss如何在许多字段(变量)中选择我需要的字段,而不显示其他的字段呢? 这个问题问的很好,在实际的数据分析或者挖掘的过程中,都需要用这个来找出对商业问 ...

  6. Oracle系列：触发器、作业、序列、连接

    .Net程序员学用Oracle系列(8):触发器.作业.序列.连接   1.触发器 2.作业 2.1.作业调度功能和应用 2.2.通过 DBMS_JOB 来调度作业 3.序列 3.1.创建序列 3.2 ...

  7. Docker 换源

    近几天又折腾起 docker来了    我发现自己在拉镜像的时候,总是超时    然后百度了一下  说要换源 90sec的一个水友 推荐了我 阿里云的加速源    我看了还是免费就想试一下 讲一下过程 ...

  8. vsCode python的函数跳转功能失效修复

    经常遇到VsCode失效的问题,很有可能是插件的原因. 关闭插件提示功能 "python.pythonPath": "/usr/bin/python", 关闭所 ...

  9. mysql 数据库表结构对比语句

    判断两个数据库互相不存在的表 select a.TABLE_SCHEMA,a.TABLE_NAME from information_schema.TABLES a where a.TABLE_SCH ...

  10. python数据类型补充

    四.元组 #为何要有元组,存放多个值,元组不可变,更多的是用来做查询 t=(1,[1,3],'sss',(1,2)) #t=tuple((1,[1,3],'sss',(1,2))) # print(t ...