纯css和js版下拉菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:;margin:; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin: auto;}
.all li:hover ul{display:block;}//ie6死了，可以正大光明不考虑兼容问题了，可以放心使用伪类了
</style>
</head>
<body>
<div class="all">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>网页设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>ui设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>动画设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>js特效
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:;margin:; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin: auto;}
</style>
<script>
window.onload=function()
{
var oMenu=document.getElementById('menu');
var aLi=oMenu.children;
var aUl=oMenu.getElementsByTagName('ul');
for(var i=;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function()
{
for(var i=;i<aUl.length;i++)//首先是先排除再选择自己
{
aUl[i].style.display='none';
}
aUl[this.index].style.display='block';
}
aLi[i].onmouseout=function()
{
for(var i=;i<aUl.length;i++)
{
aUl[i].style.display='none';
}
}
} };
</script>
</head> <body>
<div class="all">
<ul id="menu">
<li><a href="#">首页</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>网页设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>ui设计
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>动画设计
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>js特效
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>
纯css和js版下拉菜单的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 用纯css改变select的下拉菜单
select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...
- js版本下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯CSS3实现淡入淡出下拉菜单
纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
随机推荐
- win7 + MySQL 5.6.35 免安装版部署
之前项目开发一直用的asp.net技术,所以数据库自然而然的就用的Sql Server了,最近想着手看一下MySQL数据库,部署免安装版的MySQL的过程记录一下. 准备工作:window 7 6 ...
- Linux多线程--使用互斥量同步线程【转】
本文转载自:http://blog.csdn.net/ljianhui/article/details/10875883 前文再续,书接上一回,在上一篇文章:Linux多线程——使用信号量同步线程中, ...
- linux下如何源码安装expect
1.作用 自动交互.比如如果用ssh登陆服务器,每次都输入密码,然而你觉得麻烦,那你就可以使用expect来做自动交互,这样的话就不用每次都输入密码 2.依赖 依赖tcl 3.获取源码 wget ht ...
- npm教程_脚手架原理以及bootstrap引入
格式:vue init <templateName> <ProjectName> 例子:vue init webpack vue02 运行上面的命令后,脚手架帮忙按照webpa ...
- SPA （单页应用程序）
单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...
- about MySQL Workbench的基本使用及运用操作
http://blog.csdn.net/dongdong9223/article/details/48318877 <大神整理的更好!(评论里还有其他整理的) ↑ 使用MySQL Work ...
- C#学习笔记（十四）：多态、虚方法和抽象类
虚方法/非虚方法 < 实例方法 = 非静态方法 = 非类方法(非实例方法 = 静态方法 = 类方法) 函数签名(参数列表,或参数列表 + 返回类型) using System; using Sy ...
- springmvc基础知识及注解
SpringMVC 1.概念 Spring的MVC框架是一个基于DispatcherServlet的MVC框架,主要由DispatcherServlet.处理器映射.处理器.视图解析器.视图组成.每一 ...
- 【异常记录(八)】 This operation requires IIS integrated pipeline mode.
突然提示这个Error: Server Error in '/' Application. This operation requires IIS integrated pipeline mode. ...
- 用 Excel 生成和管理 Markdown 表格--转载
Markdown 作为一种轻量级的标记语言,用来进行简单的文本排版,确实方便快捷.但 Markdown 标记语言的属性,也使得其在表格处理上略显繁琐且不直观.而 Excel 几乎就是表格的代名词,借助 ...