纯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: ...
随机推荐
- Python3基础 type 获得变量的类型
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Mysql数据库基础知识
什么是Mysql数据库 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQ ...
- 调试工具--console用法收藏
1.使用console进行性能测试和计算代码运行时间:http://www.cnblogs.com/0603ljx/p/4387628.html 2.console命令详解:http://www.cn ...
- 【Coursera】Fifth week(3)
Ethernet 在 PARC(Xerox) 发明. 第一个 Local-Area-Network (LAN 局域网). 把 PCs 连接到 激光打印机上. 在夏威夷大学,被早期的无线网络 Aloha ...
- BZOJ 1005: [HNOI2008]明明的烦恼（prufer数列）
http://www.lydsy.com/JudgeOnline/problem.php?id=1005 题意: Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标 ...
- hdu 5144 NPY and shot 物理+三分
NPY and shot Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Pro ...
- selenium-firefox-headless
from selenium import webdriver import time fireFoxOptions = webdriver.FirefoxOptions() fireFoxOption ...
- android调用照相机拍照获取照片并做简单剪裁
引用转载http://www.cnblogs.com/eyu8874521/archive/2012/07/20/2600697.html 效果: 客服端代码: package com.cn.lx ...
- C#中简单的文件操作实例
using System; using System.IO; namespace Demo { class Program { static string tmpPath = @"D:/Lg ...
- 读CSV转换datatable
using System.Data; using System.IO; /// <summary> /// Stream读取.csv文件 /// </summary> // ...