纯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>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，[email protected],用.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实现鼠标感应弹出二级菜单,布布扣,bubuko.com

时间： 2024-10-07 19:27:33

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

【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu

一. 实际效果 演示地址 二.实现原理主要用Button+List组件,和遮罩实现. 1. 点击Button时,将List下移展开.2. 再次点击Button,或者选中List中的某一项时,将List上移收缩. 三.使用方法 1. 拖动UIPopupMenu自定义组件到场景exml上 2. 根据需求自定义UIPopupMenuSkin,并为组件UIPopupMenu设置皮肤(自定义皮肤UIPopupMenuSkin具体查看Demo) 3. 根据需求自定义List条目皮肤(自定义List条目皮肤具

鼠标右键弹出快捷菜单的实现

实用,备忘: Void CTestDlg::OnRButtonDown(UINT nFlags,CPoint point) { CMenu menu; CMenu *pMenu; menu.LoadMenu(IDR_MENU1); p = menu.GetSubMenu(0); ClientToScreen(&point); pMenu->TrackPopupMenu(TRM_BOTTOMALIGN,point.x,point.y,this,NULL); CDialog::OnRButton

css实现的当鼠标悬浮弹出说明层效果

css实现的当鼠标悬浮弹出说明层效果:本章节分享一段代码实例,它是使用纯css实现的鼠标悬浮弹出说明层效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

仿京东（我的商城）鼠标上去弹出层效果

引用jquery-1.9.1.min.js文件: 效果: html内容: <!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&g

jQuery地图热点效果-鼠标经过弹出提示层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>地图热点效果-鼠标经过弹出提示信息</title><meta http-equiv="Content-Type" content="

2015.7.29 第十三、十四课 jq实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）

1.磁力图片: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/cs

jq4 实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）

1.磁力图片: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/cs

WPF：设置弹出子菜单的是否可用状态及效果

需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBlock}} 问题: 1.窗体加载后,获取不到二级子菜单控件(二级菜单项弹出后,可获取所有二级子菜单). 注:仅能获取一级菜单控件,但能获取二级子菜单绑定的数据源. 2.层级数据模板内StackBlock设置为不可用时(绑定数据源实现),弹出子菜单不可用,但恢复程序中恢复StackBlock设置为可用