纯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 ...

随机推荐

JQuery的第一天实战学习
1.按照下面的工程来建: 2.新建UserVerify.html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
yum downloadonly
有些时候集群中的机器无法联网,通过yum进行安装,这样就需要找一个相同内核的机器将rpm下载后再到相应的机器上进行安装,以解决这一问题. yum 有相应的工具完成这一任务. ...
Java7编程高级进阶学习笔记--嵌套类
定义: 在一个类中定义的类叫做嵌套类. 作用: 1.允许对相关类进行逻辑分组 2.增强了代码的封装性 3.使代码具有更强的可读性和维护性使用方式: package com.cmz.baseTest; ...
java_String和StringBuffer区别分析
JAVA平台提供了两个类:String和StringBuffer,它们可以储存和操作字符串,即包含多个字符的字符数据.这个String类提供了数值不可改变的字符串.而这个StringBuffer类提供 ...
C++不能显式调用构造函数，会生成匿名对象，这点与Java完全不一样！
Java可以直接调用同名构造函数,仅仅起初始化的功能,并不构造新的对象,但是C++里面没有.看一下这段代码: class A { public: A() { printf("A() \n&q ...
Linux系统下如何禁止ping命令或允许ping命令的方法
1.禁止pingecho 1 >/proc/sys/net/ipv4/icmp_echo_ignore_all 2.允许ping echo 0 >/proc/sys/net/ipv4/ic ...
MS WORD 表格自动调整列宽，自动变漂亮，根据内容自动调整 .
在MS WORD中,当有大量的表格出现时,调整每个表格的的高和宽和大小将是一件非常累的事情,拖来拖去,非常耗时间,而且当WORD文档达到300页以上时,调整反应非常的慢,每次拖拉线后,需要等待一段时间 ...
opencv 人脸识别（二）训练和识别
上一篇中我们对训练数据做了一些预处理,检测出人脸并保存在\pic\color\x文件夹下(x=1,2,3,...类别号),本文做训练和识别.为了识别,首先将人脸训练数据转为灰度.对齐.归一化,再放入 ...
GitHub 教程 in Ubuntu
Follow these steps to configure github if you are the first time to use Github 1. Sign up a username ...
Win XP 如何禁用系统的自动更新
想关闭系统的自动更新. 打开[控制面板]/[安全中心],发现“自动更新”和“更改安全中心通知我的方式”,都已成了灰色,无法更改. 网上查了一下,找到了这样一个处理方法:将[服务]中一个名为“Autom ...

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

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

随机推荐

热门专题