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. gawk进阶

    一.使用变量 gawk支持两种不同类型的变量: 内建变量 自定义变量 1.1 内建变量 ①字段和记录分隔符变量 FIELDWIDTHS:有空格分割的一列数字,定义了每个数据字段确切宽度 FS:输入字段 ...

  2. JDK1.8 HashMap源码

    序言 触摸本质才能永垂不朽 HashMap底层是基于散列算法实现,散列算法分为散列再探测和拉链式.HashMap 则使用了拉链式的散列算法,并在JDK 1.8中引入了红黑树优化过长的链表.数据结构示意 ...

  3. Zball in Tina Town

    Zball in Tina Town  Accepts: 356  Submissions: 2463  Time Limit: 3000/1500 MS (Java/Others)  Memory ...

  4. Jmeter 中文乱码解决方案

    中文乱码一直都是比较让人棘手的问题,我们在使用Jmeter的过程中,也会遇到中文乱码问题,我查阅网上的资料解决方案都大同小异,而且不够全面或者不够详细,经过潜心研究终有所得,现在我将jmeter乱码解 ...

  5. 深入RESTful无状态原则

    目录 目录 前言 无状态原则 Web服务的状态 基于状态的Web服务 基于无状态的Web服务 总结两者的区别 前言 在上篇RESTful基础知识中整体的介绍了RESTful架构设计思想的框架,在往后的 ...

  6. Oracle 一条sql插入多条数据

    Oracle一次插入多条数据. 表结构: create table aa ( ID NUMBER(11) PRIMARY KEY, NAME VARCHAR2(20) ) 第一种方式: insert ...

  7. Kakuro Extension【最大流】

    HDU-3338 这道题真的处理起来好复杂啊,题意就是个简单的方格填数问题,但是每个白点至少放1,那么最后的可能解是怎样的呢?我们是不是要把x轴上的和y轴上的统一起来,然后就是每个点都被对应的x和y匹 ...

  8. C#联接序列

    1.  Concat() – 串联序列(有重复项) var healthFoods = new List<string> { "fruits", "veget ...

  9. 面向JVM的应用程序的项目结构

    对于Maven所用的项目结构,称为Maven标准的目录结构,不包含git 一.一个典型的源代码结构: / [project-name] README.txt LICENSE.txt pom.xml / ...

  10. TypeError: reduction operation 'argmin' not allowed for this dtype

    解决方法:在idxmax()前加.astype(‘float64’) .argmin() .argmax() 计算最大.小值所在位置的索引(针对自动索引的)(适用于Series类型:) .idxmin ...