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

摘要:
//www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.DTD“&gt://www.w3.org/1999/xhtml”&gt:relative:绝对:已访问{text-decoration:塌陷:透明:右:已访问的{display:中心:悬停{border:

<!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; 302px;}
#menu_zzjs_net li {padding:0; margin:0; position:relative; 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 { 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; 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-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 {301px;}
#menu_zzjs_net li:hover dt a, #menu_zzjs_net a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-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; 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-0 2px; margin:0 3px;}
b.p3_wwwzzjsnet {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-0 1px;}
b.p4_zzjsnet {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-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>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<ul id="menu_zzjs_net">
<li>
<!--[if lte IE 6]><a href="http://www.zzjs.net"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_zzjs"></b><b class="p2_zzjs_net"></b><b class="p3_wwwzzjsnet"></b><b class="p4_zzjsnet"></b><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><b class="p8__wwwzzjsnet"></b><b class="p7_zzjs__net"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="http://www.zzjs.net"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_zzjs"></b><b class="p2_zzjs_net"></b><b class="p3_wwwzzjsnet"></b><b class="p4_zzjsnet"></b><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><b class="p8__wwwzzjsnet"></b><b class="p7_zzjs__net"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="http://www.zzjs.net"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_zzjs"></b><b class="p2_zzjs_net"></b><b class="p3_wwwzzjsnet"></b><b class="p4_zzjsnet"></b><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><b class="p8__wwwzzjsnet"></b><b class="p7_zzjs__net"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="http://www.zzjs.net"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_zzjs"></b><b class="p2_zzjs_net"></b><b class="p3_wwwzzjsnet"></b><b class="p4_zzjsnet"></b><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><b class="p8__wwwzzjsnet"></b><b class="p7_zzjs__net"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>

免责声明:文章转载自《纯css实现鼠标感应弹出二级菜单》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CSS总结div中的内容垂直居中的五种方法格式Table.TransformColumns(Power Query 之 M 语言)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

HTML超链接中文乱码

Vm中一个超链接URL需要拼接中文作为Get请求的参数。如果直接拼接,传到后台Action的参数对象中后取出会是乱码,需要编码后再拼接到URL上。  解决方法是在Action中添加一个成员变量,保存编码后的中文参数。在vm页面渲染时取出这个变量值,再拼接超链接。 在这里碰到的问题是:调用java.net.URLEncoder的encode()方法时,如...

element 导航菜单 控制路由跳转

首先复制官网的例子,在这基础上再修改成我们想要的样子。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el...

C#位运算讲解与示例

今天在项目中遇到按位或组合权限串的问题: 首先每一个权限数都是2的N次方数 如:k1=2 ; //添加           k2=4 ; //删除           k3=8; //修改           ... 如此定义功能权限数,当需要组合权限时,就需要对各个所拥有的权限数按位或了。 如:          purview = k2|k3; //...

spring-boot配置热更新

spring boot使用的时候会遇到不断重启启动类的情况,热更新可以免去手动重启的烦恼,spring boot应用配置热更新主要有两种方式: 1、使用springloaded 配置pom.xml文件新增如下: <!-- spring boot热部署 --> <dependency> <groupId>org...

css实现平行四边形、菱形图片效果

一、平行四边形 1. 使用两个元素实现 html <a class="button"> <div>click me</div> </a> css .button{ margin: 50px; display: inline-block; background: #404ED3; trans...

ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇 在由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇中描述了一下ASP.NET新手的三个问题及相关的HTTP协议内容,发现了为什么.NET程序员会问这些问题而Java程序员很少(毕业前及大四实习都是在用Java),为了防止成为口水贴,提前声明一下,本文不是在说.NET与...