纯css实现鼠标感应弹出二级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>广告代码纯css实现鼠标经过弹出红色二级菜单站长特效网</title>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#menu_zzjs_net {list-style-type:none; margin:0 auto 50px auto; padding:0; width:302px;}
#menu_zzjs_net li {padding:0; margin:0; position:relative; width:150px; height:1.7em; z-index:100;}
#menu_zzjs_net li dl {position:absolute; top:0; left:0; padding-bottom:0;}
#menu_zzjs_net li a, #menu_zzjs_net li a:visited {text-decoration:none;}
#menu_zzjs_net li dd {display:none;}
#menu_zzjs_net table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu_zzjs_net dl {width: 150px; margin: 0; padding: 0; background: transparent;}
#menu_zzjs_net dt {margin:0; padding: 0;}
#menu_zzjs_net dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; width:150px; float:right; clear:right;}
#menu_zzjs_net dt a, #menu_zzjs_net dt a:visited {display:block; font-size: 0.9em; color: #c00; text-align:center; border:1px solid #c00; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}
#menu_zzjs_net li a:hover {border:0;}
#menu_zzjs_net li:hover dd, #menu_zzjs_net li a:hover dd {display:block;}
#menu_zzjs_net li:hover dl, #menu_zzjs_net li a:hover dl {width:301px;}
#menu_zzjs_net li:hover dt a, #menu_zzjs_net a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-width:0 1px 1px 1px;}
#menu_zzjs_net dd a, #menu_zzjs_net dd a:visited {background:#c00; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #c00; border-right:1px solid #c00; width:148px;}
#menu_zzjs_net dd a:hover {background: #ddd; color:#000; border-left:1px solid #c00; border-right:1px solid #c00;}
#menu_zzjs_net b {display:block; overflow:hidden; height:1px;}
b.p1_zzjs {background:#c00; margin:0 5px;}
b.p2_zzjs_net {background:#d4d4d4; border:2px solid #c00; border-width:0 2px; margin:0 3px;}
b.p3_wwwzzjsnet {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-width:0 1px;}
b.p4_zzjsnet {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-width:0 1px;}
b.p5 {background:#c00; margin:0 5px;}
b.p6 {background:#c00; margin:0 3px;}
b.p7_zzjs__net {background:#c00; margin:0 2px;}
b.p8__wwwzzjsnet {height:2px; background:#c00; margin:0 1px;}
#menu_zzjs_net li:hover b.p2_zzjs_net, #menu_zzjs_net a:hover b.p2_zzjs_net {background:#fff;}
#menu_zzjs_net li:hover b.p3_wwwzzjsnet, #menu_zzjs_net a:hover b.p3_wwwzzjsnet {background:#f0f0f0;}
#menu_zzjs_net li:hover b.p4_zzjsnet, #menu_zzjs_net a:hover b.p4_zzjsnet {background:#e8e8e8;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<ul id="menu_zzjs_net">
<li>

<dl>
<dt><a href="http://www.zzjs.net">站长特效一号</a></dt>
<dd><a href="http://www.zzjs.net" title="一号菜单一">一号菜单一</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单二">一号菜单二</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单三">一号菜单三</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单四">一号菜单四</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单五">一号菜单五</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单六">一号菜单六</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单七">一号菜单七</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单八">一号菜单八</a></dd>
<dd><a href="http://www.zzjs.net" title="一号菜单九">一号菜单九</a></dd>
</dl>

</li>
<li>

<dl>
<dt><a href="http://www.zzjs.net">站长特效二号</a></dt>
<dd><a href="http://www.zzjs.net" title="二号菜单一">二号菜单一</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单二">二号菜单二</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单三">二号菜单三</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单四">二号菜单四</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单五">二号菜单五</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单六">二号菜单六</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单七">二号菜单七</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单八">二号菜单八</a></dd>
<dd><a href="http://www.zzjs.net" title="二号菜单九">二号菜单九</a></dd>
</dl>

</li>
<li>

<dl>
<dt><a href="http://www.zzjs.net">站长特效三号</a></dt>
<dd><a href="http://www.zzjs.net" title="三号菜单一">三号菜单一</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单二">三号菜单二</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单三">三号菜单三</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单四">三号菜单四</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单五">三号菜单五</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单六">三号菜单六</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单七">三号菜单七</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单八">三号菜单八</a></dd>
<dd><a href="http://www.zzjs.net" title="三号菜单九">三号菜单九</a></dd>
</dl>

</li>
<li>

<dl>
<dt><a href="http://www.zzjs.net">站长特效四号</a></dt>
<dd><a href="http://www.zzjs.net" title="四号菜单一">四号菜单一</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单二">四号菜单二</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单三">四号菜单三</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单四">四号菜单四</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单五">四号菜单五</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单六">四号菜单六</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单七">四号菜单七</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单八">四号菜单八</a></dd>
<dd><a href="http://www.zzjs.net" title="四号菜单九">四号菜单九</a></dd>
</dl>

</li>
</ul>
</body>
</html>

纯css实现鼠标感应弹出二级菜单的更多相关文章

转：jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu
一. 实际效果演示地址二.实现原理主要用Button+List组件,和遮罩实现. 1. 点击Button时,将List下移展开.2. 再次点击Button,或者选中List中的某一项时,将List ...
CSS实现鼠标移入弹出下拉框
前言最近比较沉迷CSS,所以我现在来做个鼠标的交互效果 HTML <ul> <li>测试</li> <li>测试</li> <li ...
可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
关于bootstrap弹出二级对话框的使用
弹出二级对话框,即在对话框的基础上再弹出一个对话框.这对于CRM管理类系统来说应用场景很常见.看到网上有关于实现二级弹出框的方法,需要在一级对话框页面上添加不少css样式.其实,完全可以不用这么麻烦. ...
Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

随机推荐

MakeObjectInstance的前世今生（关键是ECX的何时入栈以及Self指针何时存储的）
高手们的文章有很大启发,但是总有些小错,也有没交代清楚的,以下是我的理解: 编译器编译MainWndProc的时候,它是一个正常Delphi普通函数,MakeObjectInstance对它做变换是运 ...
[vim]vim中有中文乱码
sudo gedit /etc/vim/vimrc 在文件的最后加上 let &termencoding=&encoding set fileencodings=utf-8,gbk,u ...
Android 时间格式的正则表达式
//日期格式yyyy PatternsDict.date_y= /^(\d{4})$/; //日期格式yyyy-mm PatternsDict.date_ym= /^(\d{4})-(0\d{1} ...
Java 类加载器（转）
java虚拟机中可以安装多个类加载,系统默认三个主要类加载器,每个类负责加载特定位置的类:BootStrap(内嵌在java虚拟机中由C++编写),ExtClassLoader,AppClassLoa ...
正则表达式 Regular Expressions
python method search wordlist = [w for w in nltk.corpus.words.words('en' ) ifw.islower()] print [w f ...
URAL 1250 Sea Burial 简单Floodfill
问这个人掉落的海域包含几个岛屿. 八方向相连为同一片海域,四方向相连为同一个岛屿.与边界相连的岛屿不算. 方法:在给定地图外面填充一圈".",从这个人掉落的地方开始进行floodf ...
URAL 1069 Prufer Code 优先队列
记录每个节点的出度,叶子节点出度为0,每删掉一个叶子,度数-1,如果一个节点的出度变成0,那么它变成新的叶子. 先把所有叶子放到优先队列中. 从左往右遍历给定序列,对于root[i],每次取出叶子中编 ...
最短JS判断是否为IE6(IE的写法) (转)
常用的 JavaScript 检测浏览器为 IE 是哪个版本的代码,包括是否是最人极端厌恶的 ie6 识别与检测. 代码如下: var isIE = !!window.ActiveXObject; v ...
.resources文件转.resx 文件
最近在进行.net winform应用程序的反向工程,资源文件反向出来后都是.resources文件,工程编译和运行都没有问题,但.resources文件为二级制文件,无法在Visual Studio ...
YTU 2615: AB编程题--世界杯小组赛
2615: AB编程题--世界杯小组赛时间限制: 1 Sec 内存限制: 128 MB 提交: 100 解决: 35 题目描述注:本题目自由设计,但必须使用类进行代码设计. 世界杯32支参赛队 ...

纯css实现鼠标感应弹出二级菜单

纯css实现鼠标感应弹出二级菜单的更多相关文章

随机推荐

热门专题