JS代码:

window.onload=function(){
var oDiv=document.getElementById('navMenu');
var aUl=oDiv.getElementsByTagName('ul')[0];
var aLis=aUl.getElementsByTagName('li');
for(var i=0 ;i<aLis.length; i++){
if(aLis[i].getElementsByTagName('ul')){ //条件判断也可以写成:if(aLis[i].childNodes.length>1)
aLis[i].onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display='block';
}
aLis[i].onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display='none';
}
}
}
}

html代码:

<div id="navsBox">
<div id="navMenu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">软件工程</a>
<ul>
<li><a href="#">JAVA</a></li>
<li><a href="#">NET</a></li>
</ul>
</li>
<li><a href="#">物联网工程</a></li>
<li><a href="#">信息管理</a>
<ul>
<li ><a href="#">JAVA</a></li>
<li><a href="#">NET</a></li>
</ul>
</li>
<li><a href="#">网络安全</a></li>
<li><a href="#">计算机科学与技术</a></li>
</ul>
</div>

CSS样式:

*{ margin:; padding:;}
#navsBox{background-color: #eee; width:100%;}
#navMenu{width:800px; height: 40px; margin: 0 auto;}
ul{list-style: none;}
ul li{ float: left; line-height: 40px; text-align: center; position: relative;}
a{ text-decoration: none; padding:0 20px; height: 40px; color:#000; display: block;}
a:hover { color: #fff; background-color: #666;}
ul li ul li{ display:block; background-color: #eee; margin-top: 2px; width:100%;}
ul li ul{ position: absolute; left: 0px; top:40px; display: none;}
ul li ul li a:hover{ background-color: #06f;}

个人编写,不合理之处还请指正。

javascript简易下拉菜单效果的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. javascript实现下拉菜单的显示与隐藏

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

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

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

  7. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

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

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

  9. javascript 横向下拉菜单演示

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

随机推荐

  1. Javaweb——四则运算---18.11.01

    ---恢复内容开始--- test.jsp <%@ page language="java" contentType="text/html; charset=utf ...

  2. python2.7入门---元组

        这次我们来学习下python中的元组.首先,基础认知点是,Python的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素, ...

  3. HBase 增删改查Java API

    1. 创建NameSpaceAndTable package com.HbaseTest.hdfs; import java.io.IOException; import org.apache.had ...

  4. android ActionBar 去掉menu分隔线

    自定义Theme继承原来Theme修改其中的分隔线: <item name="actionBarDivider">@null</item>  低版本设置 & ...

  5. Mac下用tomcat搭建下载服务器

    1.下载tomcat 去官方网址: http://tomcat.apache.org/ 下载最新版 2.下载解压后,自己可以随便放在哪个文件夹下,自己记得路径即可.比如Users/你的用户名/Docu ...

  6. svn资源库url问题

    今天连接svn资源库的时候一直出现 RA layer request failedsvn: Unable to connect to a repository at URL http://... sv ...

  7. Python 3基础教程21-列表和元组

    本文介绍列表也元组,先来看看他们的定义. # 元组和列表 # 元组的定义 x = 5,6,2,6 # 或者这样写 x = (5,6,2,6) # 列表定义 y = [5,6,2,6] # 元组的使用, ...

  8. 开发react的一些记录

    1.keyboard事件返回的对象SyntheticKeyboardEvent全部是null 解决方法:SyntheticKeyboardEvent的type,which,timeStamp可以得到你 ...

  9. 为Zabbix配置RabbitMQ监控模板

    RabbitMQ的配置参考 https://github.com/jasonmcintosh/rabbitmq-zabbix 简而言之,具体分为几个步骤: 1. 将脚本文件(scripts文件夹)和配 ...

  10. 在 C/C++ 中使用 TensorFlow 预训练好的模型—— 间接调用 Python 实现

    现在的深度学习框架一般都是基于 Python 来实现,构建.训练.保存和调用模型都可以很容易地在 Python 下完成.但有时候,我们在实际应用这些模型的时候可能需要在其他编程语言下进行,本文将通过 ...