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++，语法差别有多小-第三章 C++数据类型 第一部分

    一,数据类型 C++: char  int short  long float double, unsigned long double(128位,19位有效数字), wchar_t, 浮点型文字常量 ...

  2. 【2019 Multi-University Training Contest 9】

    01: 02:https://www.cnblogs.com/myx12345/p/11666961.html 03: 04: 05:https://www.cnblogs.com/myx12345/ ...

  3. 【HDOJ6628】permutation 1（dfs）

    题意:求1到n的排列中使得其差分序列的字典序为第k大的原排列 n<=20,k<=1e4 思路:爆搜差分序列,dfs时候用上界和下界剪枝 #include<bits/stdc++.h& ...

  4. 学习日记5、easyui datetimebox 和combobox设置默认值

    $('#PersonnelId').combobox("select","@Model.PersonnelId") $('#Birthday').datebox ...

  5. 学习日记2、easyui treeGrid属性及时间

    属性 该属性扩展自数据网格(datagrid),下面是为树形网格(treegrid)添加的属性. 名称 类型 描述 默认值 idField string 定义标识树节点的键名字段.必需. null t ...

  6. Sultana后记：纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  7. HTML中<input>和<textarea>的区别

    在HTML中有两种方式表达文本框 一个是<input>元素的单行文本框 一种是<textarea>的多行文本框. <input>元素: 1.一定要指定type的值为 ...

  8. Uva 1471 Defense Lines（LIS变形）

    题意: 给你一个数组,让你删除一个连续的子序列,使得剩下的序列中有最长上升子序列, 求出这个长度. 题解: 预处理:先求一个last[i],以a[i]为开始的合法最长上升子序列的长度.再求一个pre[ ...

  9. C#-概念-接口：接口

    ylbtech-C#-概念-接口:接口 接口(硬件类接口)是指同一计算机不同功能层之间的通信规则称为接口. 接口(软件类接口)是指对协定进行定义的引用类型.其他类型实现接口,以保证它们支持某些操作.接 ...

  10. HDU 1269 迷宫城堡 (Kosaraju)

    题目链接:HDU 1269 Problem Description 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<=100000), ...