<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js入门练习——菜单</title> <link rel="stylesheet" type="text/css" href="../css/basic.css" /> <script type="text/javascript"> window.onload = function() { var oMenu1 = document.getElementById("menu1");/*获取第1个列表ul*/ var oLi = oMenu1.getElementsByTagName("li");/*获取所有的li*/ var i = 0; for(i = 0;i<oLi.length;i++) { /*功能一:鼠标经过,添加当前效果,子列表显示*/ oLi[i].onmouseover = function(){/*鼠标经过,为li添加当前效果,子列表显示*/ if(this.children.length > 1){ this.className = "active"; this.children[2].style.display = "block"; } } /*功能二:鼠标离开,清除当前效果,子列表隐藏*/ oLi[i].onmouseout = function(){ this.className = ""; this.children[2].style.display = "none"; } } } </script> </head> <body> <div class="menu"> <ul class="menu1" id="menu1"> <li><a href="###">Home</a></li> <li> <a href="###">web</a> <em>》</em> <ul class="menu2"> <li><a href="###">html</a></li> <li><a href="###">css</a></li> <li><a href="###">jquery</a></li> <li> <a href="###">javascript</a> <em>》</em> <ul class="menu3"> <li><a href="###">javascript基础</a></li> <li><a href="###">BOM</a></li> <li><a href="###">DOM</a></li> </ul> </li> </ul> </li> <li><a href="###">javascript</a></li> <li><a href="###">Contact</a></li> </ul> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ body,ul,li{ margin:0; padding:0; } .menu{ margin:20px auto; width:600px; } ul{list-style:none;} a{ text-decoration:none; color:#000; } .menu1{ width:160px; border:1px solid #ddd; } .menu1 li{ position:relative; padding-left:20px; width:140px; line-height:42px; } .menu1 li:hover{background:#ccc;} .menu2,.menu3{ display:none; position:absolute; top:-1px; left:160px; border:1px solid #ddd; } .menu1 li,.menu2 li,.menu3 li{border-bottom:1px dashed #ccc;} .menu1 li:last-child,.menu2 li:last-child,.menu3 li:last-child{border:none;} em{ font-style:normal; float:right; } .active,li.active:hover{background:#C9F;}
相关推荐
最简单的REACT菜单练习,实现了三个页面的切换,纯粹是新手练习。
主是要一个树形菜单.dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
PB动态创建菜单........PB动态创建菜单........
使用HAL 库(由于已经掌握标准库用HAL 库练手、易于移植)和FREERTOS 实现 OLED(PROTEUS 内部编号 OLED12863I2C)的多级菜单(采用 U8G2 图形库),功能包含通过外部中断进行操作, RTOS 保证实时性,实现多任务系统...
Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单
JS仿京东商城菜单,下拉弹出框菜单 ,特效
ILP3 ILP3菜单练习,练习和列表。 对如何上手的疑问? 访问我们的 。所有内容均受GNU / GPL2许可好的学习 :grinning_face_with_smiling_eyes:
动态菜单练习 基于潜在动态 JSON 对象的快速小菜单练习。 旨在作为一个相当独立的代码示例。 随意使用它,适应它,无论你喜欢什么。
电影菜单,横排,可通过配置文件修改,内容无局限,现在已经聚合了部分站点进去
NULL 博文链接:https://szh8715.iteye.com/blog/1409786
此资源是练习了android中菜单的生成,通过代码生成,通过配置文件的生成。上下文菜单,子菜单等的代码和配置文件的生成,属于菜单练习的一个总结。
使用while循环和switch配合写的一个简单菜单,c++入门练习。
此文档是MFC编程中的菜单练习实验报告,对学习MFC菜单有很大的帮肋
模拟用列表实现一个点菜单,实现基础的加减菜,作为一个列表的练习,感觉不错,
本文实例为大家分享了js实现右键菜单的具体代码,供大家参考...右键菜单练习</title> <style> *{ margin: 0; /*padding: 0;*/ } ul{ width: 120px; height: 150px; background-color: rgb(204,20
Android中使用菜单资源完成游记应用功能的练习题任务说明.pdf 学习资料 复习资料 教学资源
主要介绍了C#实现Winform动态添加菜单的方法,涉及C#操作菜单的技巧,需要的朋友可以参考下
仿京东左侧产品分类弹出菜单,html完整源码
jQuery下拉菜单实现