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. JS获取各种宽度、高度的简单介绍：

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  2. [CF846D]Monitor题解

    看了一眼这题所用的操作,我觉得二维树状数组珂做,然后发现如果按时间顺序把节点一个个加进去再判会TLE,但发现二分时间明显比刚刚的做法快,于是二分时间+暴力插入该时间之内的点+树状数组维护即可AC 贴个 ...

  3. 《数据结构与算法(C语言版)》严蔚敏 | 第五章 建立二叉树，并完成三／四种遍历算法

    PS:所有的代码示例使用的都是这个图 2019-10-29 利用p126的算法5.3建立二叉树,并完成三种遍历算法 中序 后序 先序 #include<iostream> #include ...

  4. [CSP-S模拟测试]:巨神兵（状压DP）

    题目描述 欧贝利斯克的巨神兵很喜欢有向图,有一天他找到了一张$n$个点$m$条边的有向图.欧贝利斯克认为一个没有环的有向图是优美的,请问这张图有多少个子图(即选定一个边集)是优美的?答案对$1,000 ...

  5. [CSP-S模拟测试]:count（树分块）

    题目描述 李华终于逃离了无尽的英语作文,重获自由的他对一棵树产生了兴趣.首先,他想知道一棵树是否能分成大小相同的几块(即切掉一些边,使得每个连通块的点数相同).然后,他觉得这个问题过于简单,于是他想知 ...

  6. 台哥原创：java 数独源码

    2010年,当时正在做手机游戏的客户端开发工作. 每天加班之余,用了两三个晚上,开发了这个数独. 主要是生成数独数组的算法,有点难度.. ​ 如下图:点选数字栏里的数字后,界面上所有该数字会高亮显示. ...

  7. leetcode 235. 二叉搜索树的最近公共祖先(c++)

    给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x 是 p.q 的祖先且 x ...

  8. SqL语句基础之增删改查

    增查删改的SQL语句,如此的实用,下面我就来简单介绍一下它简单的用法. 1.什么是SQL? SQL是用于访问和处理数据库的标准的一种计算机语言. 2.SQL可以做什么?  (1)可以向数据库进行查询 ...

  9. kali 修改MariaDB密码

    use mysql; update user set authentication_string=PASSWORD("") where User='root'; update us ...

  10. 第 13 章 python并发编程之io模型

    一.IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...