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. Linux内核设计与实现 总结笔记（第三章）进程

    进程管理 进程:处于执行期的程序. 线程:在进程中活动的对象 虚拟机制 虚拟处理器:多个进程分享一个处理器 虚拟内存:多个线程共享虚拟内存 一.进程描述符和任务结构 进程存放在双向循环链表中(队列), ...

  2. python&数据分析&数据挖掘--参考资料推荐书籍

    1.要用python做数据分析,先得对python语言熟悉,推荐一本入门书 :笨方法学python (learn python the hard way),这本书用非常有趣的讲述方式介绍了python ...

  3. sql常用 语句总结

    一,插入一个新字段:ALTER TABLE +表名+ADD  COLUMN(字段名+ 类型) sql1 = 'ALTER TABLE klkl_4s_shop ADD COLUMN (name_rea ...

  4. HDU4405 Aeroplane chess (概率DP,转移)

    http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意:在一个1×n的格子上掷色子,从0点出发,掷了多少前进几步,同时有些格点直接相连,即若a,b相连,当落 ...

  5. Search Engine Hacking – Manual and Automation

    Search Engine Hacking – Manual and Automation Ethical Hacking Boot Camp OUR MOST POPULAR COURSE! CLI ...

  6. TNS-12535

    Fatal NI connect error 12170. VERSION INFORMATION: TNS for Linux: Version 11.2.0.3.0 - Production Or ...

  7. 清北学堂Day 6之STL

    电脑突然一炸,什么都没有保存,凉了.(又出现了笔记凉凉事件嘤嘤嘤) 行吧慢慢回忆 就算我们会手写,我们也要学STL.吸了O2的STL可是要上天的. 数据结构 pair 使用方式: pair<类型 ...

  8. 五一清北学堂培训之数据结构（Day 1&Day 2）

    Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片       1.枚举 洛谷P1046陶陶摘苹果  入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 ...

  9. 解读：nginx的一个神秘配置worker_cpu_affinity

    今天在查看nginx的相关知识的时候发现了一个nginx之前不认识的配置:worker_cpu_affinity. nginx默认是没有开启利用多核cpu的配置的.需要通过增加worker_cpu_a ...

  10. python支持的进程与线程

    一.multiprocessing模块介绍 python中的多线程无法利用CPU资源,在python中大部分情况使用多进程.python中提供了非常好的多进程包multiprocessing. mul ...